How to write a test for network requests in React components?

Research lab vector created by upklyak — Freepik

In React Applications, we may want to test some network requests and sometimes we cannot even reach to server. Therefore we need to mock global.fetch to test network requests properly.

Lets say we have a component that renders GitHub user when user clicked the Get user button:

We can implement this UI in ReactJS like this:

We successfully wrote our component, but how we can test it without touching to the server? First of all, we need to mock fetch function, and after that we render our component as well. Check this implementation:

We can run tests by yarn test command:

With 4.th line, we saved global.fetch to unmockedFetch variable and restored it after all tests done in 19.th line. In beforeAll function, we mocked fetch function to return the data we want. And in our test, we render our component and mimicked to click the Get user button. After that we expected the The Octocat username in our rendered component.

This test works fine, but what if we want to create another screen that show the repo list of user like this:

We can implement this Repos.tsx component like below:

Because of we can only return the user data in our test, we cannot properly test this component yet. For this reason, we need to make fetch function generic. So we can add url property to our mocked fetch function and we can create getDataByUrl function to generate appropriate data for related endpoints.

And of course we need to move these functions from App.test.tsx to setupTests.ts to make it available by all of test files:

Now, we can easily test our Repos component like this:

You can check this two component tests out from Github by switching to feat/manual_mock branch:

https://github.com/ozcanzaferayan/react-fetch-test/tree/feat/manual_mock

Automatic mocking with jest-fetch-mock

We can install jest-fetch-mock library like below:

yarn add -D jest-fetch-mock

Then, we can test our App.tsx like below:

In 6th line, we are overriding global.fetch to enable fetch mocking.
In 9th line, we are clearing previously set mocks so they don’t bleed into other mocks.
In 15th line, we are mocking each fetch call independently.

You can find this automatic fetch example codes on my repo:
https://github.com/ozcanzaferayan/react-fetch-test/tree/main

Also, you can find detailed examples and documentation in library’s README: https://github.com/jefflau/jest-fetch-mock#readme

Conclusion

Mocking fetches is super easy with jest-fetch-mock library. But some other counter arguments exists like Kent C. Dodds’s Stop mocking fetch article. But if you are starting to learn how to test the React components I think it’s useful to learn mocking fetch.

If you have some questions or suggestions you can share in below. See you in my next post ✌️