Mocking React with Jest & Enzyme

Jarrod Connolly - Apr 21, 2018 - 2 minute read

Jest is an amazing all-in-one test framework, and Enzyme adds powerful utilities for working with React components.

What seems to be missing for most people is a clean description of how to use these tools to test React components in real world applications. I found myself asking many questions once I started using these tools, even after going over all of the documentation and samples available.

  • How can I write clean React unit tests without tons of boilerplate code everywhere?
  • How do I test components that fetch data from API’s ?
  • How do I deal with asynchronous calls or scheduled updates from setState() ?

Setup for success I wanted to be able to have as little boilerplate code as possible in my tests, this allows them to be clean and centralizes and setup code in case it changes in the future. Jest has quite a few configuration options, lets have a look at one which will allow a setup module to be run prior to our tests executing. Here is an example of my jest.config.js file in the root of my client project.

import {configure, mount, render, shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {createSerializer} from 'enzyme-to-json';

configure({adapter: new Adapter()});

expect.addSnapshotSerializer(createSerializer({mode: 'deep'}));

global.shallow = shallow;
global.mount = mount;
global.render = render;
global.React = require('react');

This gives us the setupTestFrameworkScriptFile module which Jest describes as follows: The path to a module that runs some code to configure or set up the testing framework before each test. You can still use this technique if you are stuck in the create-react-app black-box. The setupTestFrameworkScriptFile filename is already setup for you and defined as: /src/setupTests.js As long as you create the file in that location, you should be good to go. This documented here: Initializing Test Environment. Great! Now we can setup some things to keep our tests clean and easy to read, and prevent so much copy/paste of the same setup code over and over. This is what my current jest-setup-framework.js module looks like:

Lets have a look at what exactly this file is doing for us. Lines 1–3  First we have a bunch of import statements that were once in each and every one of my test files. Line 5 Next we have the basic configure call from Enzyme that sets up the correct adapter allowing it to understand our React components. Line 7 The next part adds a snapshot serializer to the Expect framework within Jest allowing us to directly test Enzyme objects without calling toJson() all over the place. Lines 9–12 Finally, we add a few variables as globals, making them available in all of our tests without importing them everywhere. If you are an ESLint user (you are aren’t you?) then you can also add these globals there so it does not complain about them.

We now have a simple but helpful framework in place to help us start writing out tests.

Testing A Simple Component

Project Files The example project for this article is available on GitHub. jarrodconnolly/example-react-jest-enzyme example-react-jest-enzyme - Example for Medium article: Mocking React with Jest / Enzymegithub.com

Social Links