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.
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.
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:
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
Important Testing Tips
- Ensure your test suites and cases clearly communicate what is being tested.
- Ensure your test file contains test cases for a single component or function
- Ensure that the test file name matches the component being tested.