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

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