Set up a React App for Testing with Jest and Enzyme

It's been awhile since I've set up a React app for testing with Jest and Enzyme. Since I had to look up more than one of these steps to remind myself how to accomplish this, I decided to write a super quick guide in case it helps anyone else.

Dec. 8th Correction

Enzyme is not yet compatible with React 17. You should make sure the highest version of React you are using is 16.14.0 if you want to use Enzyme with your tests. This PR will add an adapter for React 17. Please do not ask them when it will be done, it will be done when they get it done!

Step 1: Create the app with create-react-app

This requires having npx installed. You can read about it here.

npx create-react-app <app-name>

Step 2: If you use Sass modules, like me, install node-sass

At the time of this writing, node-sass@5.0.0 in incompatible and node-sass@4.14.1 must be installed instead. There's a Stack Overflow answer about it here.

yarn add node-sass@4.14.1

Step 3. Install the dev dependencies for Enzyme

The --dev option is what saves these under devDependencies in your package.json file. Why do they need to be under devDependencies? Because these kinds of dependences are "Packages that are only needed for local development and testing." You can read a little more on that here.

yarn add --dev enzyme enzyme-adapter-react-16

Step 4. Configure Enzyme with an adapter in setupTests.js

Enzyme needs to know what adapter you want to use. We tell it in the setupTests.js file in the src directory of your project. You can get more details about setting up Enzyme here.

Your setupTests.js should only have some comments and one import statement right now. Just add these lines right after that import:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Step 5. Get to testing! 💪

Everything you need is installed and now you just need to write up some tests. Here are some Jest and Enzyme docs to help you get started:

• Jest "Getting Started" Guide
• Jest "Testing React Apps" Guide
• Enzyme's "Using enzyme with Jest" Guide
• Enzyme API Reference

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to https://ashleemboyer.com/newsletter.

Comments

[Mangor1no]

Thanks for your post! It's would be nice if you can write more detail about the process since the documents have some out-of-date parts. Writing mocks is also an interesting part as well. Hope I can see it in your next post!

[Ashlee (she/her)]

Hey! Do you know which parts are out-of-date? I didn't notice but am curious so I don't share out-of-date stuff in the future.

[Juan Jaques du Preez]

Anyone else getting issues with enzyme-adapter-react-16 and react 17? I had to downgrade for it to work.