Como publico un informe de cobertura de Jest?

Apunta coverageDirectory a un cartafol público, pon coverageReporters en html, xérao nun paso postbuild e engade un rewrite para que o host sirva o cartafol. Logo despregao como calquera sitio estático.

Debería facer público o meu informe de cobertura?

Está ben para un proxecto open source para que quen contribúe vexa o cuberto que está, pero engade noindex para que os buscadores non traten esas páxinas xeradas como contido pobre, que pode prexudicar o SEO das túas páxinas de verdade.

Xabier Lameiro · 2023-01-01

Como publicar o informe de cobertura das probas na túa aplicación React

Executas jest --coverage, obtés un informe HTML majo en coverage/, e aí morre, na túa máquina. Esta publicación converte ese informe nunha páxina que calquera pode abrir — útil para un proxecto open source onde quen contribúe quere ver o cuberto que está todo, ou simplemente para ensinar o teu traballo. O stack é mínimo:

Jest

Unha "alternativa" perfecta a SonarQube para proxectos pequenos.

Publicar un informe de probas non o fai todo o mundo, e algún considérao imprudente porque podes filtrar detalle interno. O caso de uso honesto é un repo open source onde o informe axuda a contribuír, ou un post didáctico. Se o queres pechado, unha ruta protexida con usuario e contrasinal abonda.

PD: este exemplo está feito con Next.js, pero serve para calquera aplicación web que use jest.

1. Ruta para o informe

O primeiro é apuntar o coverageDirectory de jest a un cartafol público:

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',
    },
};

collectCoverageFrom importa máis do que parece: sen el, a cobertura calcúlase só sobre os ficheiros que algún test importou, o que infla os teus números. Apúntao aos globs reais do código para que os ficheiros sen test conten como 0, non como ausentes.

2. Script para modificar o informe

O informe referencia o seu CSS/JS/imaxes con rutas relativas que se rompen ao servilo desde unha sub-ruta. Este script reescribe esas rutas e personaliza un par de textos:

Se prefires unha clase, usa un CustomReporter de Jest e implementa onRunComplete.

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. Xera o informe ao facer build

Engade un paso postbuild para que o informe caia no cartafol público cada vez que compilas:

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. Crea un redirect no host

Para que unha URL limpa sirva o index.html do cartafol:

next.config.js

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

Unha cousa que fixen mal: mantéreno fóra de Google

Aquí está a parte que ningún titorial che avisa, e que lle pasou a este mesmo sitio. Unha vez o informe de cobertura foi público, Google indexou cada unha desas páxinas HTML xeradas — decenas de ficheiros case idénticos e con pouco texto. Iso é contido de pouco valor de manual, e dilúe os sinais de ranking das túas páxinas de verdade; foi parte do que fixo que AdSense marcara este dominio. Publicar o informe está ben, pero dille aos buscadores que o ignoren:

Inxecta <meta name="robots" content="noindex"> no HTML xerado (o mesmo script do reporter que arranxa as rutas pode engadilo), ou
Serve unha cabeceira X-Robots-Tag: noindex para a ruta ou subdominio do informe.

Un informe de cobertura é para as persoas que o buscan, non para os resultados de busca. Publícao, e logo escóndeo dos crawlers.

Aquí un exemplo de como se ve o informe deste blog: coverage.xabierlameiro.com