React Test Coverage & Reports

Ensuring your React application works correctly is crucial. Test coverage helps you measure how much of your code is being tested, while reports give you insights into which parts of your application need better testing.

What is Test Coverage?

Test coverage measures the percentage of your code executed by tests. It helps identify:

Untested components or functions
Code paths that might cause bugs
Areas where additional tests are needed

Coverage can include:

Statements – Lines of code executed
Branches – Conditional statements (if/else) tested
Functions – Functions called in tests
Lines – Lines of code executed

Generating Test Coverage with Jest

Jest is the most common testing framework in React applications.

Step 1: Install Jest (if not already installed)

npm install --save-dev jest

Most React apps created with Create React App already include Jest.

Step 2: Run Tests with Coverage

Use the following command:

npm test -- --coverage

Or, for CRA:

react-scripts test --coverage

This generates a coverage summary in your terminal, for example:

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------------|---------|----------|---------|---------|-------------------
All files        |   85%   |    75%   |   80%   |   86%   |
Button.jsx       |   90%   |    80%   |   100%  |   90%   | 12
Login.jsx        |   80%   |    70%   |   75%   |   82%   | 22, 45

% Stmts – Percentage of statements tested
% Branch – Percentage of conditional branches tested
% Funcs – Percentage of functions tested
% Lines – Percentage of lines tested
Uncovered Line #s – Lines that weren’t tested

Step 3: View HTML Coverage Report

Jest can generate a detailed HTML report for easier inspection:

npm test -- --coverage --coverageReporters=html

After running, open coverage/lcov-report/index.html in your browser to see a color-coded report showing which files and lines are fully tested or missing tests.

Improving Test Coverage

Focus on critical components first – Components with complex logic
Add unit tests for functions – Ensure every function has test cases
Test conditional logic – Include if/else, loops, and ternary branches
Mock API calls – Test components without relying on real servers
Use snapshots carefully – Great for static UI, but also test behavior

Integrating Coverage with CI/CD

Automate coverage checks to ensure new code is tested:

npm test -- --coverage --watchAll=false

Or, in GitHub Actions:

- name: Run tests
  run: npm test -- --coverage --watchAll=false

You can fail builds if coverage falls below a threshold:

"jest": {
  "coverageThreshold": {
    "global": {
      "branches": 80,
      "functions": 85,
      "lines": 90,
      "statements": 90
    }
  }
}

Benefits of Test Coverage and Reports

Identify untested code – Know exactly which parts need tests
Increase code reliability – Prevent future bugs
Maintain high-quality codebase – Especially in large React apps
Integrate with CI/CD – Automatically monitor test coverage
Track progress – Coverage reports help you visualize improvements over time

React Handbook