Write test for React: component, hoc, hooks, promise, saga, graphql, custom hooks
In this article, I will talk about writing test for react component, connected component, higher order component(HOC), native react hooks, redux saga function (generator function), and function with promise. In the end, I will also talk about an important technique in react testing: how to mock dependencies.
All the examples are available in this git repo: react test demos
1. Test with a component
We will begin with tests for react component with Enzyme. If you have already worked with Enzyme, you should know that they are shallow and mount for rendering the component. Mount is for rendering the full DOM while shallow will not render the sub component unless you ‘find’ and ‘dive’ into it.
Imagine that we have a component with the name of “Com” with another component “SubCom” inside. Here is an example of testing the existences of certains elements and the function callbacks from user interactions:
2. Test with connected component and HOC (Higher Order Component)
With react-redux, sometimes it’s difficult to test ‘connect(Component)’. Here is a way to to do it by creating mocked store in test:
Here is another example of testing HOC with redux-form.
Link to source code.
3. Test with redux-saga
4. Test with promise function
Enzyme provides resolves and rejects to help with testing with async, but it is also possible to test the promise by mocking the execution of promise with ‘then’.
5. Test with react hooks
In order to test hooks, I use react testing library. React testing library is a competitor of Enzyme for react integration test. The idea behind this library is to test the DOM by simulating the real user interface. It is like “mount” in Enzyme. (Update 2019/08/27: Enzyme now also supports hooks.)
6. Test graphql queries
We can test graphql queries by providing a MockedProvider for mocked query responses. An example will be shown in the next part ‘Test custom hooks’.
If the query is made by the hook useQuery and if it is used only once in the component, it is not a bad way to mock useQuery to return the expected result. (For more information: How to mock dependencies in jest: the pitfalls, the tricks and the best practices)
7. Test custom hooks
Without a library, it is not easy to test a custom hook independently because it “lives” in a component. Luckily the library react hooks testing library helps us solve this problem.
Let’s take an example of a custom hook which uses two other hooks (useContext and useQuery).
Here is the full working examples. Thanks for reading !