Comment le test de l'unité des appels d'API avec moqué fetch() dans réagissent-native avec la Blague

À Réagir Natif-je utiliser fetch pour effectuer des demandes de réseau, cependant fetch n'est pas explicitement requis du module, de sorte qu'il est apparemment impossible de fantaisie dans la Plaisanterie.

Même essayer d'appeler une méthode qui utilise fetch dans un test permettra:

ReferenceError: fetch n'est pas défini

Est-il un moyen de tester de telles requêtes à l'API de réagir natif avec la Blague?

InformationsquelleAutor J T | 2016-03-17
  1. 27

    À l'intérieur de votre cas de test vous pouvez vous moquer de toute fonction que vous voulez en utilisant la Blague du se moque:

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

    Cette approche ne fonctionne que pour la promesse basée sur des cas de test (voir pit dans la Plaisanterie docs).

    Autant que fetch est une fonction async, vous avez besoin pour exécuter vos tests à l'aide de pit (lire plus à propos de async tests ici).

    • Pour info vous pouvez maintenant utiliser it en retour d'une Promesse.
    InformationsquelleAutor Alexey Kureev
  2. 9

    Une autre approche où vous vous moquez du mondial fetch objet: 

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

    Au-dessus de la méthode d'assistance peuvent être modifiés de la manière que vous voulez 🙂 j'Espère que ça aide quelqu'un

    InformationsquelleAutor jhm
  3. 7

    Plutôt que de rouler votre propre maquette, vous pouvez utiliser le jest-fetch-maquette mnp paquet afin de remplacer le chercher de l'objet. Ce package vous permet de simuler des réponses et vérifier envoyé des demandes. Voir ce lien pour une utilisation approfondie des exemples.

    • Sinon, votre maquette ne doit pas être Jest-spécifique. fetch-fantaisie a une très bonne API et est plus complet que jest-fetch-dérision.
    • le problème avec fetch-maquette et presque tous les autres modules pour s'être moqué d'extraction est qu'ils demandent beaucoup trop de configuration. Ils devrait faire disparaître matcher et automatiquement d'intercepter toutes les fetch appels. Je ne veux pas avoir à dupliquer mon installation rapide dans une unité de test juste pour s'assurer que le code testé reçoit un légitime objet de Réponse.
    InformationsquelleAutor ArthurDenture
  4. 1

    J'ai résolu ce problème en ajoutant isomorphic-fetch.

    $ npm install --save isomorphic-fetch

    et de l'utiliser comme

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

    whatwg-extraction pourrait fonctionner ainsi

    InformationsquelleAutor Harry Moreno
  5. 1

    Comme @ArthurDenture recommandé, vous pouvez utiliser fetch-maquette, mais il y a quelques paquets supplémentaires que vous devez installer pour qu'il fonctionne avec Réagissent Native et de la Plaisanterie:

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

    Vous pouvez ensuite se moquer de récupérer les demandes 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();
});
    InformationsquelleAutor Tom Aranda