Question

在React Native中我使用fetch来执行网络请求，但是fetch不是明确需要的模块，因此在Jest中模拟似乎是不可能的。

即使尝试在测试中调用使用fetch的方法，也会导致：

ReferenceError：未定义提取

有没有办法在Jest的本地反应中测试这样的API请求？

Answer 1

在测试用例中，你可以使用Jest的模拟来模拟你想要的任何函数：

fetch

此方法仅适用于基于承诺的测试用例（请参阅Jest文档中的pit）。

至于date是异步函数，您需要使用cc运行所有测试（详细了解异步测试here）。

Answer 2

另一种模拟全局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 : {};
        },
      });
    });
  });
};

上面的帮助方法可以任何你想要的方式修改:-)希望它可以帮助某人

Answer 3

您可以使用jest-fetch-mock npm包覆盖全局获取对象，而不是滚动自己的模拟。该软件包允许您设置虚假响应并验证发送的请求。请参阅该链接以获取大量用法示例。

Answer 4

我通过添加isomorphic-fetch解决了这个问题。

$ npm install --save isomorphic-fetch

并使用它

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

whatwg-fetch也可以起作用

Answer 5

正如@ArthurDenture建议的那样，您可以使用fetch-mock，但是还需要安装一些其他软件包才能使其与React Native和Jest一起使用：

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

然后，您可以在测试中模拟获取请求。这是一个例子：

// __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 6

假设您要测试解决和拒绝案件，为此，您首先模拟提取行为，然后使用 Jest 的 rejects 和 resolves 具有断言块的方法


function fetchTodos() {
  return fetch(`${window.location.origin}/todos.json`)
    .then(response => response.json())
    .catch(error => console.log(error))
}

describe('fetchTodos', () => {
  it('returns promise resolving to parsed response', () => {
    global.fetch = jest.fn(() => Promise.resolve({ json: () => ''}))
    expect(fetchTodos()).resolves.toBe('');
  })
  it('returns promise handling the error', async () => {
    global.fetch = jest.fn(() => Promise.reject(''))
    expect(fetchTodos()).rejects.toBe('')
  })
})

Answer 7

如react-testing-library文档中所示，您可以使用jest.spyOn（）函数，该函数仅在下次调用该提取函数时对其进行模拟。

AttributeError: 'tuple' object has no attribute 'child_entity'

react-testing-library

Answer 8

由于使用带笑话的fetch-mock出现问题，我发布了fetch-mock-jest。它基本上提供了完整的fetch-mock api，但带有一些特定于玩笑的助手，并且可以开玩笑地随手可用，而无需自己进行任何棘手的接线

如何使用模拟fetch（）以及Jest

8 个答案: