Testing React with Jest & Enzyme for beginner in 2020

Why am i writing this tutorial?
I am a newbie in the realm of testing. I have tried to google and follow some essay’s steps to set up the testing environment, but facing error and hard to find out the problems. In my point of view, they skipped some minor procedure which is important for beginner. So, I decided to write a full step about implementing jest and enzyme in React for beginner and for my reference in case I forget in the future.

Let’s start with npx create-react-app unit-test-app. Type in npm start in the console. You will see the below image. Very familiarize, right?

In fact, when we use create-react-app to start a new project, it already comes with Jest. We can stop the development server and type in npm test.

We can see the green pass shows that we pass the test which located at src/App.test.js. (If you cannot see something like above, you can press a to re-run all tests)

Question: How does Jest know which files should be called to test?

The default value for jest will consider *.test.js and *.js files inside __tests__ directories to be test files.

Let’s open App.test.js.

test('renders learn react link', () => { 
const { getByText } = render(<App />); 
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); });

We can guess from the code intuitively: We expect component App should have the text ‘learn react’ which is true, we can find out from the first picture.(In this test, it is case insensitive /learn react/i, you can try to remove i and run the test again and it will fail the test since the actual word is ‘Learn React’).

Why Enzyme?

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components’ output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

Enzyme’s API is meant to be intuitive and flexible by mimicking jQuery’s API for DOM manipulation and traversal.

In a nutshell, we can use Enzyme to find a DOM and simulate events like .click.

Let’s install it by:

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

We install enzyme-adapter-react-16 because we are using react version 16 in 2020.

We have to tell Jest that we want to use Enzyme adapter. Open setupTest.js and add below code. (Otherwise, you need to manually import from each test file.)

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

Let’s create a new component: Counter.js this is a simple component that display the counter value and can be increased by clicking the button.

Counter.js

To test it, we have to create a test file for it. Create a file: Counter.test.js. Name a test file as (component name).test.js for the component that being tested is always a good practice.

Counter.test.js

We use describe to define groups of test, shallow to create an instance of the component, find to find the html tag(it works similar to CSS Selectors), test is where you perform individual tests and the pattern is expect(something).toBe(something).

Remember to import React and the component!

Now, run npm test

We passed the test, however, if you want to see more details, you may need to add the --verbose in package.json.

Run npm test again.

Now, it shows the words in describe and test.

You may also want to know what percentage of the code has been coverage in the test. Just add the --coverage flag.

Run npm test again and you will see it now.

This is the end of the tutorial, we have tested a component. In face, Jest provides many matchers, not just toBe(), click here to learn more. Enzyme also provide a lot convenient functions, click here to learn more.

If you find this tutorial is useful, please give me applause. Thanks for reading.