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

Let’s GO!

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:

Link to source code.

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:

In fact, ‘Connect’ in react-redux is a Higher order component. In general, in order to test with Higher order component, we just need to mock the compose in tests.

Here is another example of testing HOC with redux-form.

Link to source code.

3. Test with redux-saga

Redux-saga use generator function, so making test with saga function is to play with “next()” in the generator function. Every ‘yield’ should correspond to an execution with ‘next()’.

Link to source code.

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’.

Link to source code.

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.)

Link to source code.

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

What is the custom hook ? A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. Component is for the UI, then the custom hook is for your component logic. It can be how we get and format data, and it can be also how to handle the callbacks.

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 !