An Interest In:
Web News this Week
- March 23, 2024
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
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>
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]
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.
Original Link: https://dev.to/ashleemboyer/set-up-a-react-app-for-testing-with-jest-and-enzyme-4ae2
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To