How to unit test API calls with mocked fetch() in react-native with Jest

Inside your test case you can mock any function you want by using Jest's mocks:

fetch = jest.fn(() => Promise.resolve());

This approach works only for the promise-based test cases (see pit in the Jest docs).

As far as fetch is an async function, you need to run all your tests using pit (read more about async tests here).


Another approach where you mock the global fetch object:

const mockSuccesfulResponse = (
  status = 200,
  method = RequestType.GET,
  returnBody?: object
) => {
  global.fetch = jest.fn().mockImplementationOnce(() => {
    return new Promise((resolve, reject) => {
      resolve({
        ok: true,
        status,
        json: () => {
          return returnBody ? returnBody : {};
        },
      });
    });
  });
};

The above helper method can be modified any way you want :-) Hope it helps someone


I solved this by adding isomorphic-fetch.

$ npm install --save isomorphic-fetch

and using it like

import fetch from 'isomorphic-fetch';
...
fetch('http://foo.com');

whatwg-fetch might work as well


Rather than rolling your own mock, you can use the jest-fetch-mock npm package to override the global fetch object. That package allows you to set up fake responses and verify sent requests. See that link for extensive usage examples.