React tips — Testing React Component with Jest + Enzyme (basics)

Photo by Jamie Street on Unsplash

This post is intended for people who have never tested react apps or doesn’t have much experience with it.

If you are using Create React App you don’t need to do anything about Jest, it is ready to use, but if you have an existing application or isn’t using Create React App you’ll need to install some packages. Basically you need to add these packages:

$ npm i --dev jest babel-jest babel-preset-env babel-preset-react react-test-renderer

Before start coding, I would like to say that I know that writing regular tests aren’t easy or aren’t a common practice for many developers, but it’s very important. So, if you don’t do tests because it’s hard or complex or you think it is a wast of time, I would recommend to start slowly and with basic tests until you feel comfortable with it. The most important thing is to know what need to be tested and what are the basic tools you need to do this.

In this post I am going to use another test utility called Enzyme. Why? Because it is convenient utilities that allow me to work with shallow rendering, static rendered markup/DOM rendering, “jQuery-like” API to find elements, etc.

Basically I use Jest + Enzyme in my tests, but you can use other tools combination like Mocha+Chai+Enzyme, it’s up to you.

Let’s get started creating a new project with create-react-app:

$ create-react-app react-basic-tests-with-jest-enzyme

The minimal component tests verify that the component renders properly, it’s called smoke testing or “Build Verification Testing”. When you create a new project with create-react-app it comes with a basic test for App.js component called App.test.js.

This is the default nomenclature for tests with Jest, so for every component you create, just add a new file called {YourComponentName}.test.js.

If you run “npm test” command, you can see this basic test passing:

Now, let’s add Enzyme to our project:

npm i enzyme enzyme-adapter-react-16 react-test-renderer

You will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (I’m using React 16.x).

The adapter will also need to be configured in your global setup file, so create a new file on root folder called “src/setupTests.js” with the content below:

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

That’s all you need, now you can start to using Jest + Enzyme. Let’s rewrite the previous test using shallow rendering:

Shallow rendering renders only component itself without its children. So if you change something in a child component it won’t change shallow output of your component or if a bug was introduced to a child component, it won’t break your component under test. It also doesn’t require DOM.

Now we have our test environment configured, all you need to do is decide what need to be tested, and this is the most import part of unit tests. So, let’s add more tests to App component. If you take a look at App.js file, you can see some html elements:

Suppose the h1 element is required, so we need to test it like this:

As you can see, these smoke testings are very straightforward and gives you a basic feedback if your components are at least rendering. If you never wrote a unit test, this could be a good introduction.

You also can see the test coverage using a simple command:

npm test -- --coverage

That’s all for now and I hope this help you.

You can clone this sample on github: https://github.com/lblima/react-basic-tests-with-jest-enzyme

Thanks for reading!

lblima/react-basic-tests-with-jest-enzyme

facebook/create-react-app

Jest · 🃏 Delightful JavaScript Testing

Introduction · Enzyme

Benefits of Software Testing