How to get % code coverage? ✅

Achieving 100% Code Coverage: A Practical Guide

This article details how to achieve 100% code coverage for your project efficiently. Let's dive in!

Preparation

Before starting, identify these key components:

1. Test Scope: Define the code segment to be tested (function, module, etc.).
2. Third-Party Libraries: Choose testing libraries (e.g., Mocha).
3. Report Format: Select the report format (e.g., lcov for Codecov).

Planning upfront streamlines the testing process.

Practical Implementation

This example uses a TypeScript file:

Create a test folder in your project's root directory. Tests are placed in files with the .test.ts extension (or similar, like .spec.ts).

We'll use Mocha, Sinon, and c8 for coverage reporting:

<code class="language-json">  "devDependencies": {
    "@types/mocha": "^10.0.9",
    "@types/sinon": "^17.0.3",
    "c8": "^10.1.2",
    "mocha": "^10.8.2",
    "sinon": "^19.0.2"
  }</code>

These packages need to be installed. Additional libraries will be added later.

The following commands run tests and generate reports:

<code class="language-json">  "scripts": {
    "test": "mocha --require ts-node/esm --experimental-specifier-resolution=node",
    "test:watch": "mocha --watch --require ts-node/esm --experimental-specifier-resolution=node",
    "coverage": "c8 --reporter=lcov npm run test",
    "coverage:default": "c8 npm run test"
  },</code>

The test:watch command is crucial; it automatically reruns tests on code changes, eliminating manual restarts.

TypeScript compilation requires additional modules:

<code class="language-json">  "devDependencies": {
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3"
  }</code>

Example: Testing a Simple Function

Let's test this add function:

add.test.ts

<code class="language-typescript">export function add(a: number, b: number): number {
    return a + b;
}</code>

The corresponding test file:

add.ts

<code class="language-typescript">import { strict as assert } from 'assert';
import { add } from '../add';

describe('Function add()', () => {
    it('should return 5 when adding 2 and 3', () => {
        const result = add(2, 3);
        assert.equal(result, 5);
    });

    // ... more test cases ...
});</code>

This compares expected and actual results. Failing tests indicate issues. Thorough testing ensures that code modifications don't break existing functionality.

Testing DOM Interactions

To test DOM manipulations (e.g., click events), install jsdom and jsdom-global:

<code class="language-json">"devDependencies": {
    "@types/node": "^22.9.0",
    "jsdom": "^25.0.1",
    "jsdom-global": "^3.0.2",
}</code>

Configure these packages:

<code class="language-javascript">require("jsdom-global")();

global.DOMParser = window.DOMParser;</code>

This allows Node.js to simulate a browser's DOM environment.

Testing Asynchronous Operations

For asynchronous functions (e.g., API calls), use nock and node-fetch:

<code class="language-json">"devDependencies": {
    "nock": "^13.5.6",
    "node-fetch": "^2.7.0",
}</code>

Configure these packages:

<code class="language-javascript">import fetch from "node-fetch";

global.fetch = fetch as any;</code>

nock mocks API responses, providing predictable and stable test environments. node-fetch provides a browser-like fetch implementation for Node.js.

Codecov Integration

To integrate with Codecov, create a GitHub repository and follow Codecov's setup instructions. GitHub Actions can automate report uploads. A sample GitHub Actions workflow:

<code class="language-json">  "devDependencies": {
    "@types/mocha": "^10.0.9",
    "@types/sinon": "^17.0.3",
    "c8": "^10.1.2",
    "mocha": "^10.8.2",
    "sinon": "^19.0.2"
  }</code>

This workflow runs tests and uploads coverage reports to Codecov on each push or pull request. A Codecov badge can then be added to your README.

Conclusion

By following these steps and adapting them to your specific needs, you can achieve and maintain 100% test coverage, improving code quality and reliability. Remember to refactor repetitive test code into reusable functions for better maintainability.

The above is the detailed content of How to get % code coverage? ✅. For more information, please follow other related articles on the PHP Chinese website!