
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](https://github.com/enzymejs/enzyme/pull/2430) 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](https://www.npmjs.com/package/npx).

```bash
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](https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0/64626556#64626556).

```bash
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](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file).

```bash
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](https://enzymejs.github.io/enzyme/).

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

```jsx
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](https://jestjs.io/docs/en/getting-started)
- [Jest "Testing React Apps" Guide](https://jestjs.io/docs/en/tutorial-react)
- [Enzyme's "Using enzyme with Jest" Guide](https://enzymejs.github.io/enzyme/docs/guides/jest.html)
- [Enzyme API Reference](https://enzymejs.github.io/enzyme/docs/api/)


Learn how to set up and configure a React app for Jest and Enzyme testing in just a few steps.

Set up a React App for Testing with Jest and Enzyme


The worst part of finishing a tutorial is not knowing what to do next. You _could_ go look up some app ideas online, but aren't you tired of making to-do lists and calculators you probably won't use? It probably feels like there's nothing left to make.

![Jack Tripper saying, "Well, as a matter of fact, there is something"](https://media.giphy.com/media/FeiQbJ2BjZLoHdD5oB/giphy.gif)

What about a resume? I spent today coding mine up using Gatsby (I really needed to use the typography and icon plugins), then I did a swift little `ctrl-p` > "Save to PDF". It was much easier for me to do it this way than to make something in LibreOffice Draw. The program always seems to distort colors and such anyways.

So... what makes a resume the _perfect_ project?

- It's only one page&mdash;that's not too much work.
- You can practice laying things out with CSS if you do what I did and use two columns.
- There's all types of elements you can practice with: headers, paragraphs, links, and lists.
- Again, if you use two columns, you can practice placing your elements in the correct order for accessibility.
- You can use get some extra practice with tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse/) that test accessibility, performance, and best practices.
- After it's done, you can add it to your personal/portfolio site(s) and have something great-looking to brag about. 😉

Still feeling a little uninspired about design? Take a look at these sites for some resume examples:

- [Piktochart](https://piktochart.com/blog/well-designed-resume-examples-inspiration/)
- [Dribbble](https://dribbble.com/search?q=resume)
- [Awwwards](https://www.awwwards.com/inspiration/search?text=resume)

If you have any other ideas, or would like to share your work, please do leave it in the comments below or [send me a tweet](https://twitter.com/ashleemboyer)! I love seeing what other people create. 😊


Do you ever feel stumped on what project to create in a new framework after you finish your first tutorial? This one is simple and also a productive use of your time.

Posts Related to the "javascript" Tag