How to mock video pause function using JEST?

Question

In my components I have code like this:

this.videoRef.current.pause();

Where videoRef is <video ref={this.videoRef} autoPlay muted > ...

When Is pause reached in test, I am getting a error:

 Error: Not implemented: HTMLMediaElement.prototype.pause

How can I mock pause function?

    const wrapper = mount(<ComponentWithVideoTag />);

    const el = wrapper.find('video').props();
    Object.defineProperty(el, 'paused', {
        writable: true,
        value: jest.fn(),
    });

Not working for me.

Answer 1

I wouldn't worry about trying to mock the props on the specific element, just mock the higher-level API that is being called. You can achieve this with spyOn, just be sure to call mockRestore on the stub afterwards (just in case you need it elsewhere in the file).

const pauseStub = jest
  .spyOn(window.HTMLMediaElement.prototype, 'pause')
  .mockImplementation(() => {})
const wrapper = mount(<ComponentWithVideoTag />);
// trigger the code that you would expect to call the pause function
expect(pauseStub).toHaveBeenCalled()
pauseStub.mockRestore()