Cypress, React and Vite collaboration
This short article is dedicated to the integration of Cypress 10, React 18 and Vite with e2e testing, API testing and component (unit) testing using a single framework and minimal problem.
This article includes:
- Instructions for adding e2e, component, and api tests using cypress to your React application.
- A little guide to getting code coverage reports using Cypress 10 and the Istanbul Vite plugin for your React application.
Install React with Vite
At the moment, you can quickly create a complete application with React and Vite using the Vite CLI command:
npm create vite@latestpnpm create viteyarn create vite
Just follow the instructions, select React with Typescript and enter the project name. After initializing the project, we need to configure the server port inside vite.config.ts to fix the URL of our application:
If you need to migrate from Create React App (CRA) you can read this article.
Install Cypress
The process of adding cypress will also not differ from the process described in the official cypress documentation. The first step is to add cypress:
npm install cypress -Dpnpm install cypress -Dyarn add cypress -D
Configuring e2e and testing components. Follow the quick start instruction from cypress:
npx cypress openyarn cypress open
Choose Vite and React for component testing and press Next Step:
After that, click the continue button and select a browser, at the end click run component or run e2e testing in your browser.
Add e2e tests
After completing all the default steps for installing each of the types of tests, in your project, the “cypress” folder will appear:
In the next step, we need to specify the URL address of our application, which our cypress application will access to implement e2e tests, for this we slightly modify cypress.config.ts:
Now we will proceed directly to writing tests, for e2e tests we will create the following directory:
/cypress/e2eThen add the spec.cy.ts file to this folder with a small simple e2e test. This test describes visiting the root of our application and rendering it in the browser based on our baseUrl from the configuration file.
To run this test with a single command that will start the Vite server and open cypress, you need to add another package that implements this:
npm install start-server-and-test -Dpnpm install start-server-and-test -Dyarn add start-server-and-test -D
This plugin is also recommended for running the server and cypress in the official cypress manual.
Once the package is installed, add the following commands to our package.json:
Now we can start the Vite server with one command and run the cypress application in parallel. Next, we can select our only test and run it with a single click:
Add API tests
For API tests, we will not use mocks or install an additional server, just imagine that you have a server, and you want to write API tests using cypress, for this article I will use https://api.publicapis.org/ for this example.
For API tests, create the following directory:
/cypress/e2e/apiNext, add the file api.cy.ts to that folder with API test. This test describes request entries from next URL: https://api.publicapis.org/entries, after receiving the response, we need to check the status and availability of properties:
To run this test, select the specification file from the cypress user interface:
Add components (unit) tests
To get started with unit or component testing in cypress, you need to add a special package for React:
npm install @cypress/react18 -Dpnpm install @cypress/react18 -Dyarn add @cypress/react18 -D
If you are using an earlier version of React, use the package:
npm install @cypress/react -Dpnpm install @cypress/react -Dyarn add @cypress/react -D
For components tests, create the following directory:
/src/__tests__Next, add the file App.cy.tsx to that folder with component test. This test describes mounting the App.tsx component:
Earlier we added the commands needed to run this test, and in this case we don’t need a server, use cy:open-unit and select the App.cy.tsx file:
Add code coverage reports
After we have implemented all the test types we need, it’s time to add test coverage. At the time of writing, the cypress manual is not complete and does not explain how to get code coverage for React with Vite bundler.
First, we need a tool code using vite-plugin-istanbul:
npm install vite-plugin-istanbul -Dpnpm install vite-plugin-istanbul -Dyarn add vite-plugin-istanbul -D
When the package is installed, modify vite.config.ts again:
That’s not all, because you need a plugin for code coverage react applications:
npm install @cypress/code-coverage -Dpnpm install @cypress/code-coverage -Dyarn add @cypress/code-coverage -D
add inside /cypress/support/component.ts:
import “@cypress/code-coverage/support”;Also, you need to update cypress.config.ts (pay attention that cypress 10 is not supported /cypress/plugins folder):
After that, you can run cy:run-unit and discover two new folders:
/.nyc_output/coverage
Inside /coverage folder, we found Istanbul coverage report:
But we will not see all the files because Istanbul by default uses coverage only for those files for which there are tests, in order to configure Istanbul reports more flexibly, add the following package:
npm install @istanbuljs/nyc-config-typescript -Dpnpm install @istanbuljs/nyc-config-typescript -Dyarn add @istanbuljs/nyc-config-typescript -D
Next add .nycrc.json file configuration for Istanbul:
Now you can run the command again and find the main.tsx file with zero coverage:
Conclusion
That’s all, thanks for reading, in this article we got acquainted with the various types of tests that can be implemented using cypress, and also figured out how to add code coverage reports to our application using React and Vite.
Full repository for this article:
If you liked the article, please subscribe and leave your comments, thanks!
