¿Cómo publico un reporte de cobertura de Jest?

Apunta coverageDirectory a una carpeta pública, pon coverageReporters en html, genéralo en un paso postbuild y añade un rewrite para que el host sirva la carpeta. Luego despliégalo como cualquier sitio estático.

¿Debería hacer público mi reporte de cobertura?

Está bien para un proyecto open source para que los que contribuyen vean lo cubierto que está, pero añade noindex para que los buscadores no traten esas páginas generadas como contenido pobre, que puede perjudicar el SEO de tus páginas de verdad.

Xabier Lameiro · 2023-01-01

Como publicar el reporte de cobertura de testing en tu aplicación de React

Ejecutas jest --coverage, obtienes un informe HTML majo en coverage/, y ahí muere, en tu máquina. Este post convierte ese informe en una página que cualquiera puede abrir — útil para un proyecto open source donde quien contribuye quiere ver cómo de cubierto está todo, o simplemente para enseñar tu trabajo. El stack es mínimo:

Jest

Una "alternativa" perfecta a SonarQube para proyectos pequeños.

Publicar un reporte de testing no lo hace todo el mundo, y alguno lo considera imprudente porque puedes filtrar detalle interno. El caso de uso honesto es un repo open source donde el reporte ayuda a contribuir, o un post didáctico. Si lo quieres cerrado, una ruta protegida con usuario y contraseña es suficiente.

PD: este ejemplo está hecho con Next.js, pero sirve para cualquier aplicación web que use jest.

1. Ruta para el reporte

Lo primero es apuntar el coverageDirectory de jest a una carpeta pública:

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ás de lo que parece: sin él, la cobertura se calcula solo sobre los ficheros que algún test importó, lo que infla tus números. Apúntalo a los globs reales del código para que los ficheros sin test cuenten como 0, no como ausentes.

2. Script para modificar el reporte

El reporte referencia su CSS/JS/imágenes con rutas relativas que se rompen al servirlo desde una sub-ruta. Este script reescribe esas rutas y personaliza un par de textos:

Si prefieres una 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. Genera el reporte al hacer build

Añade un paso postbuild para que el reporte caiga en la carpeta pública 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 en el host

Para que una URL limpia sirva el index.html de la carpeta:

next.config.js

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

Una cosa que hice mal: mantenlo fuera de Google

Aquí está la parte que ningún tutorial te avisa, y que le pasó a este mismo sitio. Una vez el reporte de cobertura fue público, Google indexó cada una de esas páginas HTML generadas — decenas de ficheros casi idénticos y con poco texto. Eso es contenido de poco valor de manual, y diluye las señales de ranking de tus páginas de verdad; fue parte de lo que hizo que AdSense marcara este dominio. Publicar el reporte está bien, pero dile a los buscadores que lo ignoren:

Inyecta <meta name="robots" content="noindex"> en el HTML generado (el mismo script del reporter que arregla las rutas puede añadirlo), o
Sirve una cabecera X-Robots-Tag: noindex para la ruta o subdominio del reporte.

Un reporte de cobertura es para las personas que lo buscan, no para los resultados de búsqueda. Publícalo, y luego escóndelo de los crawlers.

Aquí un ejemplo de cómo se ve el reporte de este blog: coverage.xabierlameiro.com