Question

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

我在componentDidMount()方法中有一个访存调用，并且能够正确地进行测试。在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调用，或者以某种方式传递要获取的网址？

对此我还是陌生的，所以我们将不胜感激！

谢谢！

Answer 1

您可以使用fetch-mock库分别模拟每个请求。假设您要请求2个URL，并且您想将请求中的mockData返回到第一个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();
}

使用Jest / Enzyme

1 个答案: