Code Coverage Using Cypress 10^ for React Application

Introduction

In the world of React development, testing is a crucial aspect of ensuring the reliability and stability of applications. This raises a series of questions, how much testing is good enough? How would we say our testing is completed? What scenarios need to be tested/automated to cover the maximum scenario?

And the answer to all the questions is “Code Coverage”. Code coverage analysis is a powerful tool that helps gauge the effectiveness of tests by measuring the percentage of codebase that they exercise.

Airtel B2B has a lot of E2E User journeys that use React as a development tool for web applications. Cypress is a great tool that can automate UI journeys quickly when updates and new features are being added frequently. With frequent changes and additions in code, it becomes very difficult to ensure all scenarios are covered and no bugs are leaked into production. Code coverage with cypress helps to overcome this issue to a great extent and ensures quality is maintained.

Understanding Code Coverage

Code coverage is a metric that quantifies the extent to which code is tested. It’s typically expressed as a percentage, indicating the proportion of lines, functions, statements, or branches that are executed during testing. A higher code coverage percentage suggests a more thorough and effective testing strategy.

2 Type of Code Coverage

1. Code Coverage through Unit Testin — Coverage captures through unit test cases written by the developer to verify their code.
2. Code Coverage through Function Testing (preferably through Test Automation) — Code Coverage captures after deploying the application on the test server and then executes the test scenarios (through automation). It helps to validate how much application code is covered by Automation scenarios only. It further helps to have bug-free applications on production.

Note — In this blog we will talk about Code Coverage through Function Testing (Automation) only.

Why React UI Code Coverage?

• It prevents defect leakage.

• It reports on portions of the codebase that necessary test cases have not covered.

• It detects the areas of test cases that are useless for the current project, which can be reported and eliminated to make the code lighter.

• It lets users create additional test cases as required, ensuring maximum test coverage.

Jacoco is widely used for Java-based backend services/applications to extract code coverage. With Cypress comprehensive code coverage for React Applications can be achieved against Cypress automation.

How does it work?

Integration with UI (React) Repository

Instrumentation for React UI Code

Code instrumentation is a software engineering technique used to monitor and analyze the behavior of a computer program or application during runtime. It involves inserting additional code, aka instrumentation code, into the source code of a program to collect data about its execution. This data can include information about the program’s performance, resource usage, and various runtime characteristics.

How to Instrument React UI Code?

A helper NPM module can be added in dependencies with parameters when starting the application to achieve instrumentation for UI Applications based on React.

Dependency: @cypress/instrument-cra ( cypress-io/instrument-cra)

This will be a 2 line operation to get the react code instrumented and ready to be tested.

1. Install the dependency in React Repo (where UI code will run)

npm -I -D install @cypress/instrument-cra

Check If UI REACT Code is Instrumented properly

Start the NPM server on localhost:9000 / with the default address and required dependencies installed and go to the console of the browser.

Steps –

• Add this config in package.json in react code :

"scripts": { "start": "react-scripts -r @cypress/instrument-cra start"
 }

• If building from react to run independently add this configuration in the start script to bypass PRODUCTION checks instrumentation (Cypress has some checks to avoid instrumentation on Production): export CYPRESS_INSTRUMENT_PRODUCTION=true
• Run command npm run start
• Navigate to localhost:9000 / Wherever you have hosted the website on a browser (Any would work)
• After navigating to the webpage right click and click on Inspect
• Move to Console and In the console type command: window.__converage__

Something like the below image (console) should be returned, This confirms that UI code is now ready to interact with Cypress and give a detailed code coverage against the automation tests.

Different instrumentation dependencies that will be used for code coverage

Setting Up Automation Suite (Cypress) for React Applications

Quick setup of Cypress Automation →

• Install Cypress: If not already already, install Cypress and create a new project:
  - npm install cypress — save-dev
  - (Cypress version 10 or above preferred)
• Configure Cypress: Create a `cypress.json` configuration file in the project’s root directory to specify Cypress configuration as per project/automation.
• Write Tests: Create test files in the `cypress/integration` directory to write E2E/ component tests using Cypress.
• Run Tests: Execute Cypress tests using the Cypress Test Runner.

Now, let’s proceed to integrate code coverage analysis into your Cypress tests for React applications.

Prepare Cypress Automation for Code Coverage

To enable code coverage analysis with Cypress in the Automation project, follow the below steps

1. Install Code Coverage Tools

Preferable to use the dependency cypress/code-coverage for react-based application

npm install - save-dev nyc @cypress/code-coverage

2. Configure Cypress

Cypress will need before and after test events to capture and store code covered against a test. The below configuration will allow Cypress to interact with the instrumented react code and collect code coverage data.

Add the code below to the supportFile and setupNodeEvents function in the Cypress Automation repository.

// cypress/support/e2e.js
import '@cypress/code-coverage/support'

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  // setupNodeEvents can be defined in either
  // the e2e or component configuration
  e2e: {
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config)
      // include any other plugin code...

      // It's IMPORTANT to return the config object
      // with any changed environment variables
      return config
    },
  },
})

3. NYC Reporter Configuration
For reports to be generated by Cypress additional dependencies can be used with configuration defined as per user/requirement. The below configuration generates HTML and lcov formats which are useful.

In the cypress automation add the below configuration in package.json

4. Run Tests with Code Coverage
Run Cypress tests with code coverage analysis by executing the following command:

npm run cypress:run

Cypress will automatically generate code coverage reports after running the tests.

Users can confirm if data is being collected by checking the cypress test report/cypress run if before and after methods are automatically being called!

Analysing Code Coverage Reports

Once Cypress tests are complete, code coverage reports will be generated.

1. Generate Code Coverage Report
   Add a script to your `package.json` file to generate the code coverage report:

"scripts":
 {  "generate-coverage-report": "npx nyc report --reporter=text-lcov > coverage.lcov 
                && npx codecov" }

2. Run the Report Generation Script
Execute the script to generate the coverage report:

npm run generate-coverage-report

3. View the Report — Add SONAR

Open the generated HTML code coverage report in your browser to examine the coverage statistics. This report will highlight the parts of your React codebase covered by your tests.

Airtel Case Study

Airtel B2B/B2C drives a lot of traffic from online/web pages, Hence good UI experience for a customer is always a priority for the organization. A lot of Airtel products are live on UI and end-to-end orders can be placed for the same. Ensuring the best quality with every release becomes crucial for the team.

With additive support of UI code coverage team can ensure that all scenarios are covered and UI automation can be improved to cover edge cases, plus it can help to assess redundant code which helps further with code management. Overall this ensures High quality in less time

Airtel uses a Jenkins pipeline(CI-CD pipeline) to release changes to Production. This is a single-click solution where a single merge will ensure all quality checks and prepare deployment on production

The below pipeline includes

• Compiling the code into a JAR,
• Deploying the JAR, accomplishing basic health check up on the server,
• Executes test automation and finds coverage against automation run using Sonar.

Certain checks are placed on the Test case pass percentage and Code Coverage percentage to ensure that no issues are missed

Generally, Test Automation & Code Coverage analysis is implemented for backend releases only. However now with the integration of Cypress code coverage a similar process will be achievable for UI releases also!
Combining with existing coverage checks like a minimum coverage percentage for release will improve the quality of releases and block viable issues for the organization.

Sonar is integrated with Cypress code coverage despite having HTML reports so that all code coverages i.e. Backend and Front End (UI) can be clubbed for a release/feature and is accessible at the same place.

Sample backend Jenkins pipeline -

Automation Suite -

Sonar Coverage -

Conclusion

Code coverage analysis is an essential practice in React development that ensures your tests are comprehensive and effective. When integrated with Cypress, code coverage analysis becomes a powerful tool for gaining insights into your React applications’ health and stability.

In this guide, we’ve walked through the steps to set up code coverage analysis with Cypress for React applications. As you continue to refine your testing processes, code coverage analysis will play a pivotal role in maintaining high-quality software and preventing regressions in your React projects.

Lead Developer — Aditya Gupta

Happy testing! 🚀