Unit Testing in React using Jest Enzyme

Although there are numerous documentations and tutorial videos out there which tell a lot more about Unit Testing in React using Jest and Enzyme, take this piece of Medium story as a cookbook of all that you can or may do on your React project to achieve unit testing, better code coverage and lesser dates with bugs.

Tip: Use a react boilerplate or a create-react-app template which already provides the startup wiring so that you don’ t have to do it over and over again.

So, let’s get started, otherwise.

Install of Testing Tools in your React project

• If you have created your React project using create-react-app utility, jest must be already installed in the nested dependencies. If you do a npm run eject , you should be able to see all kinds of hidden dependencies and configurations like jest.
• You need three npm dependencies to start with. Install these dependencies with the flag --save-dev as this will make install these dependencies as development dependencies only, not needed to be included in a production grade build.
• react-test-renderer is a dependency required for enzyme which has to be installed separately.
• The enzyme-adpater-react-* is needed as per the version of react that is being used in your concerned project.
• UPDATE: As of React 17, the `enzyme-adapter-react-16` has compatibility issues. For now, we can use — https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17 till an official version of the adapter comes from the enzyme team.

npm install --save-dev enzyme react-test-renderer enzyme-adapter-react-16

At the point of writing this article, the versions of the above dependencies are as below -

"jest": "^24.9.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"react-test-renderer": "^16.13.1",

Configuration of Enzyme Adapter

This step is minimal wiring that is needed to get started with Unit Testing in React projects. In this step, you have to attach the enzyme-adapter needed for a React v16.x project. This will allow for mounting of React components to be tested in isolation without using a real browser DOM.

• If you have created your React project using create-react-app, there should be a file by the name setupTests.js in the root of src folder.
• Add the code as below for configuration of the enzyme adapter.

Writing first unit test for a React Component

• The way a React project is configured which is spun up using create-react-app utility knows where to pick up all the unit tests from. The test files should be generally be having filename as <ComponentName>.test.js or <ComponentName>.spec.js . These test files are generally kept next to the Component that the tests written inside the test file are meant to target to.
• Below is an example React component for which I will be writing a few example unit tests in the interest of this medium article.

PrettyPrintJson.js

• Below is the screenshot of the test file where the unit tests for the above Component is written

Few things to note from the unit tests written in the above screenshot -

• We can write a whole test suite meant for a component starting it with — describe and each test case inside can start with it .
• beforeEach is used to setup anything that is required before the unit tests are run, like here, the mounting of the targeted component is required.
• shallow is utility method given from the enzyme library which creates mounts the component on to a fake DOM for the unit tests to run upon it. It does a shallow creation, as the nested components are just placeholders. Thus, it enforces testing a component in isolation, which is the first law of unit testing.

I hope these few steps helped you to get started.

Cheerios!

Some links/resources to follow -

How to test React with Jest - RWieruch

• https://www.robinwieruch.de/react-connected-component-test