<p>It&#39;s been awhile since I&#39;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.</p>
<h2 id="dec-8th-correction">Dec. 8th Correction</h2>
<p>Enzyme is not yet compatible with React 17. You should make sure the highest version of React you are using is <code>16.14.0</code> if you want to use Enzyme with your tests. <a href="https://github.com/enzymejs/enzyme/pull/2430">This PR</a> will add an adapter for React 17. <em>Please do not ask them when it will be done, it will be done when they get it done!</em></p>
<h2 id="step-1-create-the-app-with-create-react-app">Step 1: Create the app with <code>create-react-app</code></h2>
<p>This requires having <code>npx</code> installed. You can read about it <a href="https://www.npmjs.com/package/npx">here</a>.</p>
<pre class="language-bash">||<div>||<span class="line-number">1</span>||<span class="line-of-code">npx create-react-app <app-name></span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="step-2-if-you-use-sass-modules-like-me-install-node-sass">Step 2: If you use Sass modules, like me, install <code>node-sass</code></h2>
<p>At the time of this writing, <code>node-sass@5.0.0</code> in incompatible and <code>node-sass@4.14.1</code> must be installed instead. There&#39;s a Stack Overflow answer about it <a href="https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0/64626556#64626556">here</a>.</p>
<pre class="language-bash">||<div>||<span class="line-number">1</span>||<span class="line-of-code">yarn add node-sass@4.14.1</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="step-3-install-the-dev-dependencies-for-enzyme">Step 3. Install the dev dependencies for Enzyme</h2>
<p>The <code>--dev</code> option is what saves these under <code>devDependencies</code> in your <code>package.json</code> file. Why do they need to be under <code>devDependencies</code>? Because these kinds of dependences are &quot;Packages that are only needed for local development and testing.&quot; You can read a little more on that <a href="https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file">here</a>.</p>
<pre class="language-bash">||<div>||<span class="line-number">1</span>||<span class="line-of-code">yarn add --dev enzyme enzyme-adapter-react-16</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="step-4-configure-enzyme-with-an-adapter-in-setuptestsjs">Step 4. Configure Enzyme with an adapter in <code>setupTests.js</code></h2>
<p>Enzyme needs to know what adapter you want to use. We tell it in the <code>setupTests.js</code> file in the <code>src</code> directory of your project. You can get more details about setting up Enzyme <a href="https://enzymejs.github.io/enzyme/">here</a>.</p>
<p>Your <code>setupTests.js</code> should only have some comments and one <code>import</code> statement right now. Just add these lines right after that <code>import</code>:</p>
<pre class="language-jsx">||<div>||<span class="line-number">1</span>||<span class="line-of-code">import Enzyme from 'enzyme';</span>||</div>||<div>||<span class="line-number">2</span>||<span class="line-of-code">import Adapter from 'enzyme-adapter-react-16';</span>||</div>||<div>||<span class="line-number">3</span>||<span class="line-of-code"></span>||</div>||<div>||<span class="line-number">4</span>||<span class="line-of-code">Enzyme.configure({ adapter: new Adapter() });</span>||</div>||<div>||<span class="line-number">5</span>||<span class="line-of-code"></span>||</div>||</pre>

<h2 id="step-5-get-to-testing-💪">Step 5. Get to testing! 💪</h2>
<p>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:</p>
<ul>
<li><a href="https://jestjs.io/docs/en/getting-started">Jest &quot;Getting Started&quot; Guide</a></li>
<li><a href="https://jestjs.io/docs/en/tutorial-react">Jest &quot;Testing React Apps&quot; Guide</a></li>
<li><a href="https://enzymejs.github.io/enzyme/docs/guides/jest.html">Enzyme&#39;s &quot;Using enzyme with Jest&quot; Guide</a></li>
<li><a href="https://enzymejs.github.io/enzyme/docs/api/">Enzyme API Reference</a></li>
</ul>


Ashlee M Boyer

Posts with the "testing" tag

Set up a React App for Testing with Jest and Enzyme