Unit Test in React with Jest — Enzyme

Creating a web or mobile application without testing is said to be legacy systems. When the code-base for the application becomes larger, it is not so easy to debug if any error occurred.(without having a proper test integration to the code-base) Some developers targets only on writing code and adding more features to the application, but doesn’t care about testing. They keep it until the end. But that is not the right way to do the testing.

When it comes to react, react-creators or well-known Facebook provides you with the necessary tools to do the testing easily. If you are creating your react app with ‘create-react-app’ , you don’t have to worry about any Jest configuration, because it is already provided…!

Jest is a test framework for javascript and can be used as a test runner for react applications. Additionally, enzyme gives us some more specific functionalities to move smoothly with our testing.

Let’s do the following to start with testing.

1. Run the following command to create a react app. For this you need node package manager installed in your PC.

create-react-app unit-test-app

2. Let’s first download the tools needed for the unit testing, since jest already embedded with react, we are only left with enzyme to be installed. To use enzyme, you need to install enzyme-adapter-react-x for the react version (‘x’ refers to the version) you are using. Enzyme-adapter will provide additional dependencies to use enzyme with ‘react’ and ‘react-dom’.

Since it is most probable you are using react-16.x, we can install the relevant enzyme dependencies as follows.

npm i --save-dev enzyme enzyme-adapter-react-16

3. To use enzyme-adapter, you need to do the following configurations. Create setupTests.js file inside your src folder and add the following code-snippets.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

Now you are ready to the unit testing…but first we need to create an application in which we can do the unit testing.

First let’s start with a small one as follows.

Do the following changes in your src/index.js, src/app.js and add a new file Counter.js in your src folder.

Here in Counter, we added 2 buttons and display the addValue of the local state.

Now run your application in localhost, by running npm start in your terminal.

Now let’s create our first unit test with jest and enzyme…

Create a new file with the extension of *.test.js. Now once you run npm test, Jest will identify the test file and run the test.

Now in our application, we have 2 components. In App, Counter will be rendered as a child component. Now what you need to understand is what should be tested in your unit test implementation.

As you all know in unit test what we do is, just verification of the functionality of each and every function. (Simply we check whether the original output of the function is same as the expected output)

It’s easy as that…

Now we have to check the functionality of the Counter component.

Let’s write the test as follows in Counter.test.js and let me explain it for you…

Normally, when we run npm start to run our application, we render the actual dom onto the browser, but in unit test as given above, what happens is rendering the component into a node environment. That makes much easier and faster way of testing.

Each test cases for each test suite comes with it function where we need to pass name of the test case and a call back function in which we write our test.

Here, we accomplish it with shallow rendering the Counter component. As given above, now you can access the elements in counter component with find method that comes with shallow rendering. Event simulations are also possible as given above.

Now you get the actual output and validate its accuracy with the expected output. Following will be the test results given in terminal.

Try to implement a unit test for decrement function in counter component.

Now I will give you some few examples to do your unit testing. So few components will be given as follows along with the testing for each component.

Create following User.js and Text.js as follows with corresponding test files and update app.js as given below.

Here in App, User component is given with props…

As you can see in user.test.js, what you have to keep in mind is, how to get the element that we want to do testing and how to do a simulation.

Here, find method from enzyme used to get element and simulate is used to do the simulation.

Since we are only rendering our User component, props won’t be sent from App. Therefore we have to mock them as javascript object ‘state’ and wrap it inside the shallow rendering component User as follows.

const wrapper = shallow(<User state={state} />)

Now you have to check when the inbox is clicked. For that I’m taking the checked prop from the checkbox element to do the validation.

You can see this in user.test.js clearly.

Now let’s do the same unit test for text input type as follows.

Even for text input field validation we do the simulation with a target value and then get the value prop to check the equality.

Below you can see the terminal once you run npm test and pass the test cases.

This would be a simple way of explaining unit test with jest and enzyme. Hope you get a clear approach with this article…