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

dom., 1 de xan. de 2023

Nesta publicación imos ver como publicar o informe de cobertura das probas na súa aplicación React. Para iso utilizaremos:

Jest

Unha "alternativa" perfecta de SonarQube para proxectos pequenos.

Non é habitual nin necesario publicar o teu informe de probas da túa aplicación, incluso haberá quen pense que é algo imprudente porque pode expor información confidencial da súa aplicación. Pero a idea principal disto é que se tes un proxecto de código aberto e queres para que a xente poida contribuír, é unha boa idea que poidan ver o informe das probas para que saiban o ben que está cuberto o seu proxecto ou porque queres ensinarlle á xente a probar unha aplicación.

Non obstante, para ter unha seguridade adicional, é tan sinxelo como telo nun camiño protexido cun nome de usuario e contrasinal.

PD: Este exemplo desenvólvese nunha aplicación web feita con Nextjs pero funciona para calquera aplicación web que use jest.

1. Ruta para o informe

O primeiro que debemos facer é asignar o jest outputDirectory 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',
    },
};

2. Script para modificar o informe

O que fai este script é modificar a ruta dos ficheiros estáticos que precisa o informe para funcionar como imaxes, css, javascript, etc. Ademais, algúns textos dos informes están personalizados.

A alternativa se usas clase é usar a clase CustomReporter e implementar o método 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. Comando para xerar o informe cando se xera a compilación

Para que o informe se xere no cartafol público cando remate a compilación, debemos engadir os seguintes comandos no 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. Crea unha redirección no servidor/plataforma na nube

No meu caso eu uso Vercel pero sexa cal sexa a plataforma que use, debe crear unha redirección para que cando se acceda á ruta /coverage

next.config.js

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

Aquí podes ver un exemplo de como é o informe de proba deste blog xabierlameiro.com/coverage