unit testing - tests - Cómo realizar pruebas unitarias de llamadas a la API con fock() simulado en reaccion-native con Jest

snapshot testing react

Question

En React Native utilizo fetch para realizar solicitudes de red, sin embargo fetch no es un módulo explícitamente requerido, por lo que parece imposible burlarse de Jest.

Incluso tratar de llamar a un método que utiliza la fetch en una prueba resultará en:

ReferenceError: fetch no está definido

¿Hay alguna forma de probar dichas solicitudes de API para reaccionar de forma nativa con Jest?

Answer 1

Como lo recomendó @ArthurDenture, puede usar fetch-mock , pero hay algunos paquetes adicionales que deberá instalar para que funcione con React Native y Jest:

$ npm install --save-dev fetch-mock
$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save-dev babel-preset-env

A continuación, puede simular solicitudes de recuperación en sus pruebas. Aquí hay un ejemplo:

// __tests__/App.test.js
import React from ''react'';
import App from ''../App'';
import fetchMock from ''fetch-mock'';
import renderer from ''react-test-renderer'';

it(''renders without crashing'', () => {
  fetchMock.mock(''*'', ''Hello World!'');
  const rendered = renderer.create(<App />).toJSON();
  expect(rendered).toBeTruthy();
});

Answer 2

Dentro de tu caso de prueba puedes simular cualquier función que desees utilizando los simulacros de Jest:

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

Este enfoque funciona solo para los casos de prueba basados ​​en la promesa (ver pit en los documentos de Jest).

En la medida en que fetch es una función asíncrona, debe ejecutar todas sus pruebas utilizando pit (lea más acerca de las pruebas asíncronas here ).

Answer 3

En lugar de hacer rodar su propio simulacro, puede usar el paquete jest-fetch-mock npm para anular el objeto de captación global. Ese paquete le permite configurar respuestas falsas y verificar las solicitudes enviadas. Vea ese enlace para ver ejemplos extensos de uso.

Answer 4

Otro enfoque en el que te burlas del objeto de fetch global:

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 : {};
        },
      });
    });
  });
};

El método auxiliar anterior se puede modificar de la forma que desee :-) Espero que ayude a alguien

Answer 5

Resolví esto agregando isomorphic-fetch .

$ npm install --save isomorphic-fetch

y usándolo como

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

Whatwg-Fetch podría funcionar también