How to write a test for network requests in React components?
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
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:
Also, you can find detailed examples and documentation in library’s README: https://github.com/jefflau/jest-fetch-mock#readme
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 ✌️