Testing Your React Component With Jest and Enzyme

Introduction

So you have created your react application. All seems to work as expected. However, you can never be too sure. Hence, testing your app becomes a necessity. There are quite a number of testing frameworks for javascript applications: Ava, Mocha, Jasmine, Jest, and so on. I recommend Jest for your React application.

Why Jest?

Jest seems to be gaining much popularity in the Javascript-React community because of its easy ‘out-of-the-box’ setup, manual mocking integration, and snapshot testing ability. As it is, it was specifically designed to test React applications.

In addition, “Jest parallelizes test runs across workers to maximize performance. Console messages are buffered and printed together with test results. Sandboxed test files and automatic global state resets for every test so no two tests conflict with each other.”

Therefore, in this tutorial, we’ll walk through a step-by-step guide on how to test your React components using the Jest testing framework and Enzyme.

Setup

The first thing you want to do is install Jest and Enzyme. Type the following command in your terminal:

npm install jest enzyme --save-dev

After installation, create a __tests__ folder in your app. This would contain all tests to be written for the app. “Why ‘__tests__’?” you’d say. Well, that’s the recommended folder naming convention adopted in Jest.

Testing React Components

Testing React components is quite easy with Snapshot Testing (this a useful test tool that ensures UI components do not change unexpectedly). Basically, Snapshot Testing involves analysing how app components change over time.

Luckily, Jest makes Snapshot Testing effortless. In Jest, a snapshot test case for a React component renders the component, takes a screenshot of the rendered component, and compares it with a referenced image stored during the test. The test fails if the screenshot and referenced image do not match. In such an instance, the change was either unexpected or the component was updated (in which case, the snapshot also needs to be updated).

For this tutorial, I’ve created a simple ToDo app which displays an input field, a button, and a table. You can view the app on GitHub.

Screenshot of ToDo App

The button component (labelled ‘ADD ITEM’) is defined below:

A simple snapshot test for this component can be defined as below:

Sometimes, a snapshot error such as the image below might occur:

Component snapshot test error

To fix this error, run jest —-updateSnapshot. This updates the snapshot and reference image.

Testing the Button Component Further

You can also test for particular properties in your component snapshot test. This is where Enzyme comes in. Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output. You can write assertion tests for certain properties and values in your component. For instance, the following code asserts that Button component has a name.

Testing a Button Click Event

To test a click event, Jest provides a manual mocking functionality that allows us to create mock functions. A mock function can be as simple as

const mockFn = jest.fn();

Also a click event can be simulated with Enzyme using the simulate() function.

Some Handy Jest Methods

You can also check the Jest documentation for other methods.

Important Testing Tips

1. Ensure your test suites and cases clearly communicate what is being tested.
2. Ensure your test file contains test cases for a single component or function
3. Ensure that the test file name matches the component being tested.