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

Question

I am starting to learn more about testing for React using Jest/Enzyme and I am trying to learn how to test api calls that use fetch.

I have a fetch call in a componentDidMount() method and I am able to test that correctly. In the beforeEach() method, I have a window.fetch method that creates the mock fetch. Here is an example:

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

However, I have another component that has two fetch calls in the componentDidMount() method, and I'm wondering how I can mock each fetch call individually. Is it possible to have two window.fetch calls or somehow pass in a url for the fetch?

I am still new to this, so any help would be appreciated!

Thanks!

Answer 1

You can use fetch-mock library to mock each request separately. Suppose you're requesting 2 URLs and you want to return mockData in the request to the first URL, and just 404 status in the second one. Your example code mocked with fetch-mock may look like this:

 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(); }