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

dom, 1 ene 2023

En este post vamos a ver como publicar el reporte de cobertura de testing en tu aplicación de React. Para ello vamos a utilizar:

Jest

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

No es común ni necesario publicar tu reporte de testing de tu aplicación, incluso habrá quien opine que es algo inprudente por que puedes exponer información sensible de tu aplicación. Pero la idea principal de esto es que si tienes un proyecto open source y quieres que la gente pueda contribuir, es una buena idea que puedan ver el reporte de testing para que sepan que tan bien esta cubierto tu proyecto o por que quieres enseñar a la gente como hacer testing en de una aplicación.

Sin embargo, para tener un extra de seguridad, es tan sencillo como tenerlo en una ruta protegida con usuario y contraseña.

PD: Este ejemplo está desarrollado en una aplicación web hecha con Nextjs pero sirve para cualquier aplicación web que use jest.

1. Ruta para el reporte

Lo primero que debemos hacer es asignar el outputDirectory de jest a una carpeta publica

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 el reporte

Este escript lo que hace es modificar la ruta de los archivos estáticos que el reporte necesita para funcionar como imágnes, css, javascript, etc. Además se customizan algunos textos del reporte.

La alternativa si usa la clase es usar la clase CustomReporter e implementar el 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 generar el reporte cuando se genera el build

Para que el reporte se genere en la carpeta public cuando se termina la build, debemos agregar los siguientes comandos en el 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. Crear una redirección en el servidor/ plafatorma en la nube

En mi caso uso Vercel pero cualquier plataforma que uses, debes crear una redirección para que cuando se acceda a la ruta /coverage

next.config.js

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

Aquí puedes ver el ejemplo de como se ve el reporte de testing de este blog xabierlameiro.com/coverage