TypeError: fetch.mockResponse is not a function in one file, but it works in another

[spsaucier-bakkt]

The jest-fetch-mock methods are working in one of my test files, but in another, I'm getting TypeError: fetch.mockResponse is not a function for the one method I want to use.

I've added require('jest-fetch-mock').enableMocks() to my setupTests.ts, so I'm not sure if I'm missing something else.

[spsaucier-bakkt]

UserChecks.test.tsx - works:

const legalMock = (publishedAt: string) => ([
  JSON.stringify({
    _publishedAt: publishedAt,
    text: 'Test'
  }),
  { status: 200 }
]);

...

describe('<UserChecks/>', () => {
  it('should ...', async () => {
    // @ts-ignore
    fetch.mockResponses(
      legalMock('2020-05-13T23:58:35Z'),
      legalMock('2020-01-13T23:58:35Z'),
    );
  });
});

AuthenticationNavigator.test.tsx - fails with TypeError: fetch.mockResponse is not a function:

const legalMock = (publishedAt: string) => JSON.stringify({
  _publishedAt: publishedAt,
  text: 'Test'
});

...

describe('<AuthenticationNavigator/>', () => {
  it('should ...', async () => {
    // @ts-ignore
    fetch.mockResponse(legalMock('2020-01-13T23:58:35Z'));
  });
});

[spsaucier-bakkt]

I've resolved this by adding import fetchMock from 'jest-fetch-mock'; to the top of the test file and replacing fetch.mockResponse with fetchMock.mockResponse.

I still don't see why this was required for one file and not the other, but /shrug

[MendezAndrewM]

I was experiencing the same problem: fetch.mockResponseOnce(...) worked fine for one file, but was giving me TypeError: fetch.mockResponseOnce is not a function for another file.

However, importing fetchMock did not work for me.

Instead, I added import { enableFetchMocks } from 'jest-fetch-mock'; to the top of the file and then added enableFetchMocks(); right before my describe blocks. Seems to be working now.

[yinzara]

This is more than likely caused by the change of the Jest resetMocks config parameter with Jest 4.0.0 from false to true.

Have you tried setting resetMocks to false in your Jest configuration?

[lepris]

why this w Thank you @spsaucier-bakkt ! I spent good few hours trying to figure out a recipe for a simple test yesterday, but now combined with this your example, I finally got it to work and without TS-ignore :

import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
import { waitFor } from 'test-utils';
import { ImageService } from '@/services';

describe('ImageService', () => {
  enableFetchMocks();
  test('should updateImage', async () => {
    const responseMock = (path: string) =>
      JSON.stringify({
        path,
      });

    fetchMock.mockResponseOnce(responseMock('test file path'));

    const path = await ImageService.updateImage('string for testing');

    await waitFor(() => {
      expect(path).toBe('test file path');
    });
  });
});

[cmdcolin]

this may not be the exact error but I found I needed to pass an async function to mockResponse, because it tries to attach a .then handler and this wouldn't work if the function was not explicitly marked async