使用 Jest/Enzyme 在 componentDidMount 中测试多个提取

Question

我开始学习有关使用 Jest/Enzyme 测试 React 的更多信息，并且我正在尝试学习如何测试使用 fetch 的 api 调用。

我在 componentDidMount() 方法中有一个 fetch 调用，我能够正确地测试它。在beforeEach() 方法中，我有一个window.fetch 方法来创建模拟提取。这是一个例子：

beforeEach(() => {
mockData = /* mock data */
// mock fetch call  
window.fetch = jest.fn().mockImplementation(() => Promise.resolve({
  json: () => Promise.resolve({
    data: mockData,
  })
}));
component = shallow(<Component />);
});

但是，我有另一个组件在 componentDidMount() 方法中有两个 fetch 调用，我想知道如何单独模拟每个 fetch 调用。是否有可能有两个window.fetch 调用或以某种方式传递一个 url 进行提取？

我还是新手，所以任何帮助将不胜感激！

谢谢！

Answer 1

您可以使用fetch-mock 库分别模拟每个请求。假设您正在请求 2 个 URL，并且您希望在请求中将 mockData 返回到第一个 URL，而在第二个 URL 中只返回 404 状态。您使用 fetch-mock 模拟的示例代码可能如下所示：

import fetchMock from "fetch-mock";

beforeEach(() => {
  mockData = { /* mock data */ };
  fetchMock.mock("/first/url", mockData);
  fetchMock.mock("/second/url", 404);
  component = shallow(<Component />);
});

/* You should also restore the original fetch in afterEach */
afterEach(() => {
  fetchMock.restore();
}