jest.fn returns undefined when called

Question

I am trying to implement a fetch mock function in my test. Following tutorials I am trying to do this by using jest.fn():

const fetchFunction = jest.fn(() => {
    return null
})

This does not work for some reason. If I just do console.log(fetchFunction) in my test I get:

[Function: mockConstructor] {
        _isMockFunction: true,
        getMockImplementation: [Function],
        mock: [Getter/Setter],
        mockClear: [Function],
        mockReset: [Function],
        mockRestore: [Function],
        mockReturnValueOnce: [Function],
        mockResolvedValueOnce: [Function],
        mockRejectedValueOnce: [Function],
        mockReturnValue: [Function],
        mockResolvedValue: [Function],
        mockRejectedValue: [Function],
        mockImplementationOnce: [Function],
        mockImplementation: [Function],
        mockReturnThis: [Function],
        mockName: [Function],
        getMockName: [Function]
      }

However if I try to invoke it by console.log(fetchFunction()) I get undefined?

I am trying this to do in a create-react-app folder. Do I have to install something extra? Any ideas about why this happens?

Pyrosis

Answer 1

It's because Create-React-App has resetMocks on by default. To turn it off you can put this in your package.json

"jest": {
  "resetMocks": false
}

They changed this for the 4.0 release. And they did mention it in their changelog https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#400-2020-10-23 But I'm guessing I'm not alone in missing that/not knowing about that...

There is an open issue about reverting that change: https://github.com/facebook/create-react-app/issues/9935

Mesosphere

Answer 2

if your jest's resetMocks config attribute is set to true, you should expect that behavior according to the docs:

Automatically reset mock state before every test. Equivalent to calling jest.resetAllMocks() before each test. This will lead to any mocks having their fake implementations removed but does not restore their initial implementation.

https://jestjs.io/docs/configuration#resetmocks-boolean

With resetMocks set to true, I resolved it by defining my mock function implementation within the test itself:

it('your test' ()=> {
  //define your mock implementation here
})

Charters

Answer 3

Validated that the following works as expected:

test('Some test...', () => {
  const fetchFunction = jest.fn(() => null)

  console.log(fetchFunction());
});

Using Jest 24.9.0.

 PASS  ./test.js
  ✓ foo (31ms)

  console.log test.js:6
    null

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.677s
Ran all test suites

Exedra

Yes but if I define fetchFunction outside of test() it doesn't! I need to define my jest.fn function outside of test because I want to overwrite global.fetch with a mock function and that returns undefined as well, even though I saw it being done in many tutorials... – Pyrosis

Not sure - I just moved the definition of the function to line 1 and it also worked fine. Here's the repl: repl.it/@xurion/scoped-jest-mocks – Exedra