Creating a Code Coverage Aggregator for Monorepos with Jest and Turborepo

Overview

High code coverage is crucial in software development, especially for financial tools like Risedle, where the margin for error is minimal. To ensure that our code is thoroughly tested, we aim for at least 95% coverage. To monitor our code hygiene effectively, we've developed a custom solution for aggregating code coverage reports.

The Challenge with Existing Tools

While tools like Codecov are commonly used, they can sometimes be slow and not as intuitive for identifying untested modules and lines. We needed a simpler, more efficient way to display code coverage for each project within our monorepo.

The Solution: In-House Coverage Reporting

We've decided to leverage Jest's built-in code coverage reporting, which is more straightforward and better suited to our needs than relying on third-party tools.

Implementation Steps

1. Generating Coverage Reports

We use Turborepo as our build system, allowing us to easily run tests and generate coverage reports for all projects with one command:

turbo run test --no-cache

2. Aggregating Coverage Reports

We then aggregate these reports into a single, deployable site. Here's how we do it:

a. Create a Script to Collect and List Coverage Reports

// coverage/build.js
const glob = require("glob");
const fse = require("fs-extra");
const Mustache = require("mustache");

const index = `
<!doctype html>
<html>
<head>
    <title>Risedle Monorepo Coverage</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <ul>
        {{#sources}}
            <li>
                <a href="/{{{.}}}/index.html">
                    {{{.}}}
                </a>
            </li>
        {{/sources}}
    </ul>
</body>
</html>
`;

glob("**/coverage/lcov-report", { ignore: "node_modules/**" }, function (er, files) {
    files.forEach((srcDir) => {
        const destDir = "coverage/" + srcDir;
        fse.copySync(srcDir, destDir, { overwrite: true | false });
    });
    const output = Mustache.render(index, { sources: files });
    fse.outputFile("./coverage/index.html", output);
});

b. Deploy with a Static Site Service

Deploy this script using a static-site deployment service like Vercel.

Live Version

Check out the live version of our coverage aggregator at coverage.risedle.com.

Conclusion

By using Jest and Turborepo in tandem with a custom aggregation script, we've created an efficient and easy-to-navigate code coverage reporting system. This approach allows us to maintain high standards of code quality and reliability, which is paramount for the success of financial tools like Risedle.

pyk’s blog