How to mock MediaRecorder API in Jest

[joshpeng1999]

Hi there, I am trying to create a web application with React and I am currently using jest to test my React app. However, there is a feature where I am using the MediaRecorder Api to record a media stream in the web application, so when I write a simple test to check if that component has rendered using jest, it fails because it tells me: "ReferenceError: MediaRecorder is not defined" in the application at
let mediaRecorder = new MediaRecorder(stream, options);.
I hear that jsdom doesn't have the mediarecorderAPI so I was trying to mock it, but I am super stuck on how to mock the MediaRecorder object or create a fake MediaRecorder object with a fake constructor that does nothing. If anyone has an idea on how to do it, please let me know 🙏

And Thank you for your help!

[jose-elias-alvarez]

For anyone else who finds this issue (currently the first Google result for "jest mock mediarecorder"): the answer is to mock the implementation of window.MediaRecorder in a beforeEach block.

Here is a simple working example (tsx):

const mockMediaRecorder = {
  start: jest.fn(),
  ondataavailable: jest.fn(),
  onerror: jest.fn(),
  state: "",
  stop: jest.fn(),
};

beforeEach(() => {
  window.MediaRecorder = (jest.fn() as any).mockImplementation(
    () => mockMediaRecorder,
  );
});

[tedsecretsource]

Thanks for the pointer but I had better luck with

Object.defineProperty(window, 'MediaRecorder', {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
        start: jest.fn(),
        ondataavailable: jest.fn(),
        onerror: jest.fn(),
        state: "",
        stop: jest.fn(),
        pause: jest.fn(),
        resume: jest.fn(),
    })),
})

Object.defineProperty(MediaRecorder, 'isTypeSupported', {
    writable: true,
    value: () => true
})

[tedsecretsource]

In fact, in the end, I went with the word global (instead of "window"). Also, include this definition as the first file above all other imports as a module and execute the module on beforeEach() to set up your mocks.

Object.defineProperty(global, 'MediaRecorder', {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
        start: jest.fn(),
        ondataavailable: jest.fn(),
        onerror: jest.fn(),
        state: "",
        stop: jest.fn(),
        pause: jest.fn(),
        resume: jest.fn(),
    })),
})

Object.defineProperty(MediaRecorder, 'isTypeSupported', {
    writable: true,
    value: () => true
})

Now, that said, setting the functions as jest.fn() with no mock implementation, just an empty function, probably isn't going to get you very far because as soon as you need to interact with this object, and you will, you'll need to fill in the mocked behavior of these commands. My recommendation: don't use jest to test this aspect of your application. Use Cypress

And @SimenB does this commit on my practice repo suffice as a reproduction of the issue?

Final Version

This is the final version of my mocked MediaRecorder. One of the keys here was the mock implementation of getUserMedia. I'm returning a promise, just like the real MediaRecorder object.

[github-actions]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.