We will build a detailed example of a React project with Vite and then use Nightwatch and Testing Library to test the components. We’ll use the Complex example available on the React Testing Library docs, written with Jest.
In this tutorial, we’ll cover the following:
- Set up a new React project with Vite, which is also what Nightwatch uses internally for component testing
- Install and configure Nightwatch and Testing Library
- Mock API requests with the
@nightwatch/api-testingplugin - Write a complex React component test using Nightwatch and Testing Library
Step 0. Create a New Project
To get started, we’ll create a new project with Vite:
npm init vite@latest
Select React and JavaScript when prompted. This will create a new project with React and JavaScript.