Como fazer um mock do fetch

Nos exemplos abaixo, substitua valorRetornadoPelaAPI pelo valor o qual você deseja que a API retorne ao realizar o fetch.

Mock manual

⚠️ Dessa forma não será possível utilizar um expect para verificar por exemplo se a função fetch foi chamada durante o seu teste.

global.fetch = async () => ({
  json: async () => (valorRetornadoPelaAPI)
});

Mock com jest.fn()

Dessa forma será possível utilizar um expect(global.fetch).toHaveBeenCalled().

global.fetch = jest.fn(async () => ({
  json: async () => (valorRetornadoPelaAPI)
}));

Com uma forma mais simplificada utilizando mockResolvedValue

global.fetch = jest.fn().mockResolvedValue({
  json: async () => (valorRetornadoPelaAPI)
});

Com jest.spyOn()

Usando o jest.spyOn podemos fazer tudo o que vimos acima e ainda resetar um mock, retornando o comportamente original da função fetch.

jest.spyOn(global, 'fetch').mockResolvedValue({
  json: async () => (valorRetornadoPelaAPI)
})

Realizando o mock em todos os tests de um describe

Normalmente quando estamos realizando um mock, queremos fazer com que ele seja executado em todos os testes de um describe, para isso podemos utilizar a função beforeEach.

describe('Testes que precisam de mock', () => {
  beforeEach(() => {
    jest.spyOn(global, 'fetch').mockResolvedValue({
      json: async () => (valorRetornadoPelaAPI),
    });
  });

  test('Este teste já possui o mock', async () => {
    // ...
  });

  test('Este teste também já possui o mock, async' () => {
    // ...
  });
});