Purpose of the Article: To perform front-end automation testing using Cypress with React
Intended Audience: Frontend Developers and Automation Testers with React
Tools and Technology: Cypress, React, NodeJS, Visual Studio Code
Keywords: Cypress and Code-coverage, Automation-testing, React, Node.js, Npm, Yarn
About Blog:
This blog demonstrates what Cypress is, and how installations, and configurations for generating Cypress code-coverage report for both TypeScript and JavaScript. Also it discusses react applications based on custom or default webpack-config.
For generating Cypress code-coverage report, dependencies differ based on the configuration of React Application, as shown in installations sections A and B below. GitHub links of sample applications are appended in the ‘Examples’ section.
What is Cypress?
- It is a JavaScript based front-end testing tool.
- It works on front-end frameworks and libraries like React, Angular, VueJs.
- It comes packaged as a module, which is all you need to get started.
Code Coverage Report:
- The code coverage report results from computing the source code lines executed during the test.
Installation
- Pre-requisite: Node.js 10 or 12 and above
- Note:
- Below mentioned installations are applicable for both TypeScript and JavaScript based react applications.
- The only dependencies for generating code-coverage reports depend upon the application: if it is using custom webpack-config for running any react application.
- After installing, you will be able to:
- Open Cypress from the CLI.
- Run Cypress from the CLI.
- Generate code-coverage report.
IMPORTANT NOTE: Configuration to generate code coverage report is shown in section A and B below. The main difference in the two configurations is the below mentioned script in package.json, which is essential in case of section ‘B’ . Commands which differ are mentioned in bold.
- If your application is using custom webpack-config for running any react application:
-
- Commands for installation and Run tests – using npm:
Command | Description |
npm install cypress –save-dev | To install Cypress as a dev-dependency in your application. |
npm install -D @cypress/code-coverage nyc babel-plugin-istanbul | This will install locally as a dev dependency for your project to generate a code coverage report. |
npx cypress open | Opens Cypress test runner, runs tests and generates code coverage report. |
-
- Commands for installation and run tests – using yarn:
Command | Description |
yarn add cypress –dev | To install Cypress as a dev-dependency in your application. |
Yarn add -D @cypress/code-coverage nyc babel-plugin-istanbul | This will install locally as a dev dependency for your project to generate a code coverage report. |
Yarn run cypress open | Opens Cypress test runner, runs tests and generates code coverage report. |
- For simple react application using default webpack-config; if your application is not using custom webpack-config for running any react application:
-
- IMPORTANT NOTE: Main difference in configuration is that the below-mentioned script is essential in package.json in this ‘B’ case. And commands which differ are mentioned in bold in the table.
In package.json:
- “scripts”: {“start”: “react-scripts -r @cypress/instrument-cra start”}
Figure 1. Change in scripts “start” in package.json
- Commands for installation and run tests – using npm:
Command | Description |
npm install cypress –save-dev | To install Cypress as a dev-dependency in your application. |
npm install -D @cypress/code-coverage @cypress/instrument-cra | This will install locally as a dev dependency for your project to generate code coverage report. |
npx cypress open | Opens Cypress test runner, runs tests, and generates a code coverage report. |
- Commands for installation and Run tests – using yarn:
Command | Description |
yarn add cypress –dev | To install Cypress as a dev-dependency in your application. |
yarn add -D @cypress/code-coverage @cypress/instrument-cra | This will install locally as a dev dependency for your project to generate a code coverage report. |
yarn run cypress open | Opens Cypress test runner, runs tests, and generates code coverage report. |
Configuration to generate the code-coverage report:
*Note: This configuration is the same for all types of reacting applications as given below:
- After cypress installations and run tests command: npx cypress open or yarn run cypress open depending upon your package manager as shown in section A & section B, you will get default scaffolded folder structure as shown in the image below:
Figure 2. Default scaffolded folder structure
- Add the code below to plugins/index.js:
module.exports = (on, config) => {
require(‘@cypress/code-coverage/task’) (on, config)
return config
}
Figure a. Path: cypress/plugins/index.js
- Add the below import statement to support/index.js:
import ‘@cypress/code-coverage/support’
Figure b. Path: cypress/support/index.js
- To instrument the code as part of its transpilation, add this plugin istanbul to the .babelrc file in plugins:
{ “plugins”: [“istanbul”] }
Figure c. Path: YourProject/.babelrc
Examples:
- Writing Your First Test
Assuming you’ve successfully installed, as per the configuration mentioned above, and opened the Cypress test runner:
– Let’s create a new file in the cypress/integration folder named sample_test_spec.js file, as shown in the examples below.
- The examples demonstrate the above-mentioned cypress sample test case and code-coverage configurations done for different sample react applications. Please refer to the repositories below on GitHub:
- Sample React Application with custom webpack-config having Cypress code-coverage configuration: https://github.com/Prashika/sample-react-app-with-custom-webpack-config.git
- Sample React Application with default webpack-config having Cypress code-coverage configuration: https://github.com/Prashika/simple-react-application-with-jsx.git
-
- Sample React-application with TypeScript having Cypress configuration to generate the code-coverage report: https://github.com/Prashika/sample-react-application-with-tsx.git
- Check Code-Coverage Report:
- Run test using the command: npx cypress open or yarn run cypress open depending upon your package manager as shown in section A & section B above.
- You could use one of the two ways to check the code-coverage as shown below:
- One way is to check code-coverage in command prompt using the commands below:
- To check just the coverage summary: $ npx nyc report –reporter=text-summary
- To check just the coverage file by file: $ npx nyc report –reporter=text
- To save the HTML report again: $ npx nyc report –reporter=lcov
- One way is to check code-coverage in command prompt using the commands below:
For example: To check the summary of the code coverage after tests run, run the command below:
Coverage Summary
-
- The second way is after running the test, check code-coverage in index.html – open in browser from the project directory:
YourProject/coverage/lcov-report/index.html
- You will get the code-coverage report in the format below:
References:
- For above-mentioned Section A: https://docs.cypress.io/guides/tooling/code-coverage
- For above-mentioned Section B: https://www.cypress.io/blog/2019/09/05/cypress-code-coverage-for-create-react-app-v3/