Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 1, 2020 01:40 pm GMT

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.

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>
Enter fullscreen mode Exit fullscreen mode

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

At the time of this writing, [email protected] in incompatible and [email protected] must be installed instead. There's a Stack Overflow answer about it here.

yarn add [email protected]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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() });
Enter fullscreen mode Exit fullscreen mode

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:

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.


Original Link: https://dev.to/ashleemboyer/set-up-a-react-app-for-testing-with-jest-and-enzyme-4ae2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To