userEvent.click not clicking element using Jest and RTL in my React app

This is a basic test for my drum machine app that I built with React and JS. I am trying to trigger a mouse click and then check if the heading has changed to reflect that click.

Since the app also plays the sound and changes the heading with keyboard presses in addition to mouse clicks, I also tried the keyDown event to click on "Q" but that similarly did not reflect a change in the heading to display "Q is playing". Which leads me to think that it simply isn't clicking.

I thought maybe it wasn't finding the element, but since the test of expect(screen.getByTestId('drum-Q')).toBeInTheDocument(); below passed, I don't think that is the issue.

The error I receive is: Not implemented: HTMLMediaElement.prototype.play

And the heading does not change in any way. I am wondering why the clicking isn't working.

Here is the drum machine deployed on gh-pages.

Test:

test("when the button 'Q' is pressed, the heading changes correctly", () => {
  render(<App />)

  userEvent.click(screen.getByTestId('drum-Q'))
  expect(screen.getByTestId('drum-Q')).toBeInTheDocument();
  expect(screen.getByTestId('heading')).toHaveTextContent('Q is playing')
});

App.js file, this is the part that the error points to:

  playSound = () => {
    this.audio.current.play();

    const id = this.audio.current.id;
    
    const parent = this.audio.current.parentNode;
    parent.classList.add('active');
    
    const display = parent.parentNode;
    display.querySelector('h1').innerText = `${id} is playing`;
  }
  
  render() {
    const { text, audio } = this.props;
  
    return (
      <div data-testid={`drum-${text}`} className="drum-pad" onClick={this.playSound} id={`drum-${text}`}>
        {text}
        <audio ref={this.audio} src={audio} className="clip" id={text} />
      </div>
    )
  }
}
    
document.addEventListener('keydown', (e) => {
  const id = e.key.toUpperCase();
  const audio = document.getElementById(id);
  
  if(audio) {
    audio.currentTime = 0;
    const parent = audio.parentNode;
    parent.classList.add('active');
    
    const display = parent.parentNode;
    display.querySelector('h1').innerText = `${id} is playing`;
    audio.play();
  }
});


export default App;
// ReactDOM.render(<App />, document.getElementById("drum-machine"));