Comment tester les appels D'API avec mocked fetch () dans react-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 en plaisantant.
, Même en essayant d'appeler une méthode qui utilise fetch dans un test permettra:
ReferenceError: fetch n'est pas défini
Existe-t-il un moyen de tester de telles requêtes API dans react native avec Jest?
5 réponses
Dans votre cas de test, vous pouvez simuler n'importe quelle fonction en utilisant les mocks de Jest:
fetch = jest.fn(() => new Promise(resolve => resolve()));
Cette approche ne fonctionne que pour les cas de test basés sur la promesse (voir pit dans les documents Jest).
Dans la mesure où fetch est une fonction asynchrone, vous devez exécuter tous vos tests en utilisant pit (en savoir plus sur les tests asynchrones ici).
Plutôt que de lancer votre propre maquette, vous pouvez utiliser le paquet jest-fetch-mock npm pour remplacer l'objet global fetch. 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 étendus.
Une autre approche où vous vous moquez 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'aide ci-dessus peut être modifiée comme vous le souhaitez: -) J'espère que cela aide quelqu'un
J'ai résolu cela 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 fonctionner
Comme @ArthurDenture recommandé, vous pouvez utiliser fetch-mock , mais il y a quelques paquets supplémentaires que vous devrez installer pour le faire fonctionner 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 fetch 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();
});