Unit Testing Using Jest & Enzyme In React JS

In this article we will discuss how to implement unit testing using Jest & Enzyme. Let’s start!

Unit testing is integral part of the software development process that helps us ensure the product’s stability and level of testing.

Before writing the test cases let us know what is Jest & Enzyme.

Jest

Jest is a JavaScript testing framework written by Facebook. It will help us make all our assertions. It allows us to create mock functions with almost zero configuration and provides a good set of matchers that makes assertions easier to read.

Jest offers one feature called “snapshot testing,” which helps us check and verify the component rendering result.

Enzyme

Enzyme is a JavaScript testing utility for easily testing react components. It helps render React components in testing mode.

Enzyme offers two basic functions for component mounting: shallow and mount. The shallow function loads in memory only the root component whereas mount loads the full DOM tree.

Now we are going to start writing our test cases.

Step 1 : Setup The Application

Using the following command you can setup the application with jest and enzyme.

1. npx create-react-app jestenzymetest
2. cd jestenzymetest
3. npm install enzyme enzyme-adapter-react-16 — dev

Step 2 : Start writing test cases

Create setupTests.js file inside src/ and add below lines. This will setup enzyme Adapter globally so you do not need to import in every files. It will configure enzyme in all testing files.

Now add this following code in App.js file and App.test.js file.

In App.js file we have some html code h1 and button element inside the div tag which render when the page load and we are going to write test case that component is rendered or not.

For write cases of App.js we have created one App.test.js file inside we have import shallow method of enzyme and component which we want to test.

The describe method is collection of Tests which is also call as Test Suites. If all tests as going pass which are added inside the describe method only test suite will pass.

There are two method to write test case

1. it
2. test

In above file we have write a test case for check the app component is going to render or not.

Inside the shallow method the <App/> component is passed and it will return result in wrapper. The expect method is use to check the expected value and returning value. The toHaveLength() method will use to check component have length or not.

Step 3 : Run The Test Cases

The below command is use to run all test cases files.

npm run test

The below command is use to run particular file’s test cases.

npm test <test-filename>

Following are the output of test command run.

Now we are adding one test case for button component. Add the below code in test.js file.

In above code the test case first find the button component whose id is “button-click” and return how many time it had been used. Then the length will compare with expected output. The simulate(‘click’) function use to check event of jest function component.

If your component will connected with redux and data is getting passed with props then the mount method will use. To pass props data from redux as default in testing file we need to create or import mock store from redux mock store and pass default props data in that.

Below are the example of how to pass props data and store in testing file.

We have wrap component inside the Router component as it will not accessible out side the router. And the Provider is use to set store value of redux.

The jest.fn() allows us to create a new mock function directly. If you are mocking an object method, This method can receive an optional function implementation, which will be executed transparently. used to call function.

Below is one example that how to test exported function using jest and enzyme.

In above example we have created one Counter function which return sum of all the value from 1 to given number. Now creating one test case which check the function return the result as expected or not.

So we have call function inside the test case and pass value as a 5.The sum of number from 1 to 5 is 15. So it work giving test as pass because the expected result is true. If you will set 16 in .toBe() function then it will giving fail.

Step 4 : Run Coverage of Testing

The below command is use to run the coverage of test. It will create the coverage folder and inside the folder it will show all test files coverage.

npm test -- --coverage

The below command is use to run the coverage of test for particular file.

npm run test jest:watch App.test.js -- --coverage --collectCoverageOnlyFrom=src/App.js

I hope this article will help you to write test cases in React project using jest and enzyme package.

Thank You so much for reading this article. Hope you enjoy this article. Give me clap for more support.