Undefined error when mocking globals with Jest and Create React App

Question

I'm new to unit testing with JS so apologies if I'm missing something obvious.

I need to mock the navigator.mediaDevices.getUserMedia method for some tests, so have defined the following in setupTests.js:

const mockMedia = {
    getUserMedia: jest.fn().mockImplementation(() =>
        Promise.resolve(
            "stream"
        ))
}
global.navigator.mediaDevices = mockMedia

This works as expected when testing in the same file:

navigator.mediaDevices.getUserMedia({video:true})
    .then((stream => console.log(stream)))

But when testing in my component I get TypeError: Cannot read property 'then' of undefined with the same code.

If I don't try and call the mocked function it appears to exist:

console.log(navigator.mediaDevices)

    {
      getUserMedia: [Function: mockConstructor] { ... }
    }

But calling results in undefined

What am I missing here and thanks in advance

I'm using create-react-app so I think it gets loaded automatically. https://create-react-app.dev/docs/running-tests/#initializing-test-environment — Tom Haines, Feb 19 '21 at 15:40

score 0 · Answer 1 · answered May 28 '21 at 15:58

0

It could be because of CRA having resetMocks default to true.

It is explained in this other question.

Here the proposal to revert that default value in CRA.

answered May 28 '21 at 15:58

user2806907

49
2

[This SO question has the answer](https://stackoverflow.com/questions/65112057/jest-spyon-navigator-mediadevices) – Ted Stresen-Reuter Sep 28 '22 at 09:27

Undefined error when mocking globals with Jest and Create React App

1 Answers1