How to publish the test coverage report in your React application

Sun, Jan 1, 2023

In this post we are going to see how to publish the test coverage report in your React application. For this we will use:

Jest

A Perfect "alternative" for SonarQube for a small projects.

It is not common or necessary to publish your test report of your application, there will even be those who think that it is somewhat imprudent because You can expose sensitive information from your application. But the main idea of this is that if you have an open source project and you want so that people can contribute, it's a good idea that they can see the test report so they know how well your project is covered or because you want to teach people how to test an application.

However, to have extra security, it is as simple as having it in a protected path with a username and password.

PD: This example is developed in a web application made with Nextjs but it works for any web application that uses jest.

1. Path for the report

The first thing we need to do is assign the jest outputDirectory to a public folder

jest.config.js

const customJestConfig = {
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    coveragePathIgnorePatterns: ['^.*\\.stories\\.[jt]sx?$'],
    coverageDirectory: 'public/coverage',
    testEnvironment: 'jest-environment-jsdom',
    coverageReporters: ['html'],
    collectCoverageFrom: ['src/components/**/*.tsx'],
    moduleNameMapper: {
        '^@/helpers(.*)$': '<rootDir>src/helpers/index.ts$1',
        '^@/layout(.*)$': '<rootDir>src/components/Layout/index.tsx$1',
        '^@/test$': '<rootDir>/jest.setup.js',
        '^@/components(.*)$': '<rootDir>src/components/$1',
        '^@/context(.*)$': '<rootDir>src/context/$1',
        '^@/hooks(.*)$': '<rootDir>src/hooks/$1',
        '^@/constants(.*)$': '<rootDir>src/constants/$1',
    },
};

2. Script to modify the report

What this script does is modify the path of the static files that the report needs to function as images, css, javascript, etc. In addition, some report texts are customized.

The alternative if you use class is to use the class CustomReporter and implement the onRunComplete method.

custom-reporter.js

import { readFile, writeFile } from 'fs';
import glob from 'glob';
glob('public/coverage/**/*.?(html|css)', function (err, files) {
    if (err) {
        console.log('err', err);
        return;
    }
    files.forEach((path) => {
        readFile(path, 'utf8', (err, data) => {
            if (err) {
                console.log('err', err);
                return;
            }
            let replaced = data.replace(
                /Code coverage generated by\n\s*<a href="https:\/\/istanbul\.js\.org\/"/g,
                `Code coverage automatically generated by Xabier Lameiro on ${new Date().toLocaleDateString()}`
            );
            if (path === 'public/coverage/index.html') {
                replaced = replaced.replace(/src="/g, 'src="coverage/');
                replaced = replaced.replace(/href="/g, 'href="coverage/');
            }
            writeFile(path, replaced, 'utf-8', function (err, a) {
                if (err) {
                    console.log('err', err);
                    return;
                }
            });
        });
    });
});

3. Command to generate the report when the build is generated

In order for the report to be generated in the public folder when the build is finished, we need to add the following commands in the package.json

package.json

{
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "postbuild": "npm run coverage",
        "start": "next start",
        "lint": "next lint",
        "test": "NODE_ENV=test jest",
        "coverage": "rm -rf public/coverage && NODE_ENV=test jest --coverage && node custom-reporter.js",
        "watch": "jest --watchAll",
        "test:clear": "jest --clearCache",
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build"
    }
}

4. Create a redirect on the server/cloud platform

In my case I use Vercel but whatever platform you use, you must create a redirect so that any

next.config.js

 rewrites: async () => {
        return [
            {
                source: '/:coverage',
                destination: '/:coverage/index.html',
            },
        ];
    },

Here you can see an example of what the test report of this blog looks like xabierlameiro.com/coverage