Test your React Components with Nightwatch and Testing Library
<p>We will build a detailed example of a React project with <a href="https://vitejs.dev/" rel="noopener ugc nofollow" target="_blank">Vite</a> and then use Nightwatch and Testing Library to test the components. We’ll use the <a href="https://github.com/testing-library/react-testing-library#complex-example" rel="noopener ugc nofollow" target="_blank">Complex example</a> available on the <a href="https://www.npmjs.com/package/@testing-library/react" rel="noopener ugc nofollow" target="_blank">React Testing Library</a> docs, written with Jest.</p>
<p>In this tutorial, we’ll cover the following:</p>
<ol>
<li>Set up a new React project with <a href="https://vitejs.dev/" rel="noopener ugc nofollow" target="_blank">Vite</a>, which is also what Nightwatch uses internally for component testing</li>
<li>Install and configure Nightwatch and Testing Library</li>
<li>Mock API requests with the <code>@nightwatch/api-testing</code> plugin</li>
<li>Write a complex React component test using Nightwatch and Testing Library</li>
</ol>
<h1>Step 0. Create a New Project</h1>
<p>To get started, we’ll create a new project with Vite:</p>
<pre>
npm init vite@latest</pre>
<p>Select <code>React</code> and <code>JavaScript</code> when prompted. This will create a new project with React and JavaScript.</p>
<p><a href="https://medium.com/pineview-labs/how-to-reliably-test-your-react-components-with-nightwatch-and-testing-library-15059e58b8fa">Visit Now</a></p>