-
-
Notifications
You must be signed in to change notification settings - Fork 6.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to mock MediaRecorder API in Jest #10789
Comments
For anyone else who finds this issue (currently the first Google result for "jest mock mediarecorder"): the answer is to mock the implementation of 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,
);
}); |
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
}) |
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 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 And @SimenB does this commit on my practice repo suffice as a reproduction of the issue? Final VersionThis is the final version of my mocked MediaRecorder. One of the keys here was the mock implementation of |
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. |
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. |
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. |
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!
The text was updated successfully, but these errors were encountered: