web-dev-qa-db-fra.com

Comment effectuer des tests unitaires des appels d'API avec fetch () simulé dans rea-native avec Jest

Dans React Native, j'utilise fetch pour effectuer des requêtes réseau. Cependant, fetch n'est pas un module explicitement requis; il est donc apparemment impossible de se moquer de Jest. 

Même essayer d'appeler une méthode qui utilise fetch dans un test aura pour résultat:

ReferenceError: l'extraction n'est pas définie

Existe-t-il un moyen de tester de telles requêtes API en natif avec Jest? 

unit-testingreact-nativejestjs
24
J T

Dans votre scénario de test, vous pouvez simuler n'importe quelle fonction à l'aide des simulacres de Jest:

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

Cette approche ne fonctionne que pour les cas de test basés sur des promesses (voir pit dans la documentation Jest).

Si fetch est une fonction asynchrone, vous devez exécuter tous vos tests avec pit (pour en savoir plus sur les tests asynchrones ici ).

23
Alexey Kureev

Au lieu de lancer votre propre maquette, vous pouvez utiliser le package jest-fetch-mock npm pour remplacer l'objet d'extraction global. Ce paquet vous permet de configurer de fausses réponses et de vérifier les demandes envoyées. Voir ce lien pour des exemples d'utilisation détaillés.

7
ArthurDenture

Une autre approche consiste à se moquer de l’objet global fetch: 

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

La méthode d'assistance ci-dessus peut être modifiée comme vous le souhaitez :-) J'espère que cela aidera quelqu'un

5
jhm

Comme @ArthurDenture le recommande, vous pouvez utiliser fetch-mock , mais vous devrez installer certains paquets supplémentaires pour que cela fonctionne avec React Native et Jest:

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

Vous pouvez ensuite simuler des requêtes d'extraction dans vos tests. Voici un exemple:

// __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();
});
1
Tom Aranda

J'ai résolu ceci en ajoutant isomorphic-fetch.

$ npm install --save isomorphic-fetch

et l'utiliser comme

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

whatwg-fetch pourrait aussi bien fonctionner

1
Harry Moreno