Engineering

Test Coverage with Istanbul (NYC) for TypeScript Projects

Test Coverage with Istanbul (NYC) for TypeScript Projects

Introduction

Recently, we worked with a client’s codebase, which is written in TypeScript. The application sets up a backend API service for its frontend counterpart. The majority of the tests were actually API integration tests conducted with Mocha, and their coverage was not being captured.

To gain a more accurate insight into the actual test coverage of the repository, it became crucial to add coverage reporting for the Mocha tests. For this, we utilized Istanbul’s command-line utility, NYC, which works seamlessly with Mocha to generate comprehensive coverage reports.

Adding coverage reports for Mocha with NYC

We will run NYC with Mocha directly against the TypeScript files. This method leverages ts-node to transpile TypeScript files on-the-fly, allowing us to run tests without a separate compilation step.

First, install the necessary packages:

npm install --save-dev mocha ts-node nyc @istanbuljs/nyc-config-typescript

When inspecting package.json, the devDependencies should include the relevant packages:

"devDependencies": {
  "mocha": "^10.2.0",
  "ts-node": "^10.9.2",
  "@istanbuljs/nyc-config-typescript": "^1.0.2",
  "nyc": "^15.1.0",
  ...
}

Next, update the script in package.json to run the tests with NYC:

"scripts": {
  "test:coverage": "nyc mocha --require ts-node/register 'src/tests/**/*.ts'"
}

The --require ts-node/register flag is essential because it tells Mocha to use ts-node to transpile TypeScript files on-the-fly.

Since the project is using TypeScript, configure the .nycrc file as follows:

{
  "extends": "@istanbuljs/nyc-config-typescript",
  "all": true,
  "extension": [".ts"],
  "report-dir": "api_coverage",
  "reporter": [
    "html",
    "lcov",
    "text",
    "text-summary"
  ],
  "include": ["src/**/*.ts"],
  "exclude": [
    "src/tests/**/*.*"
  ]
}

Explanation of key configurations

@istanbuljs/nyc-config-typescript

This package provides a minimal configuration to extend NYC with TypeScript support. It ensures that NYC can correctly handle TypeScript files, including generating source maps and instrumenting code accurately.

"all": true

Ensures all files are included in the coverage, not just those imported during tests.

Running the tests

To run the tests and generate the coverage report for the tests, use the command:

npm run test:coverage

Conclusion

By integrating Mocha with NYC, we were able to generate comprehensive test coverage reports for our TypeScript project. This setup ensured that all our code, especially the critical parts tested through API integration tests, was thoroughly covered. Running NYC with Mocha directly against TypeScript files allowed us to streamline the testing process without needing a separate compilation step.

This approach helped us identify untested areas of our codebase, improving overall code quality and maintainability. With accurate and detailed coverage reports, we can confidently maintain robust and reliable applications, ensuring that our backend API services function as expected.

Need help building your product?

Reach out to us by filling out the form on our contact page. If you need an NDA, just let us know, and we’ll gladly provide one!

Top software development company Malaysia awards