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. 

1. If your application is using custom webpack-config for running any react application:

• • Commands for installation and Run tests – using npm:

• • Commands for installation and run tests – using yarn:

2. 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:

• Commands for installation and Run tests – using yarn:

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

1. 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

2. Add the below import statement to support/index.js:

import ‘@cypress/code-coverage/support’

Figure b. Path: cypress/support/index.js

3. 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:
  1. Sample React Application with custom webpack-config having Cypress code-coverage configuration: https://github.com/Prashika/sample-react-app-with-custom-webpack-config.git
  2. Sample React Application with default webpack-config having Cypress code-coverage configuration: https://github.com/Prashika/simple-react-application-with-jsx.git

1. 3. 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:

1. 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.
2. You could use one of the two ways to check the code-coverage as shown below:
   1. 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

For example: To check the summary of the code coverage after tests run, run the command below:

Coverage Summary

1. 2. 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/