Informes de cobertura con Vitest

Genera informes de cobertura de código utilizando Vitest en proyectos JavaScript o TypeScript.

informes-cobertura-vitest

En los proyectos con pruebas unitarias automatizadas, una de las preguntas más comunes es: ¿qué parte del código realmente está cubierta con pruebas? Para eso están los informes de cobertura. Si estamos usando Vitest como framework de testing, generar este tipo de informes es muy sencillo.

Cuando hablamos de cobertura, nos referimos a qué porcentaje del código ha sido ejecutado por nuestras pruebas.

Configurando Vitest para generar cobertura

Si ya tenemos Vitest en nuestro proyecto, sólo necesitamos añadir una configuración para habilitar los informes. Lo hacemos desde el archivo vite.config.js o vitest.config.ts.

Aquí un ejemplo mínimo:

vite.config.ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
coverage: {
provider: 'istanbul', // o 'v8'
reporter: ['text', 'json', 'html'],
},
},
})

Al ejecutar los tests por primera vez te preguntará si quieres instalar istanbul o v8.

Ejecutando las pruebas con cobertura

Para generar los informes basta con usar el flag --coverage:

Terminal
vitest run --coverage

Esto ejecuta todas las pruebas y luego genera el informe correspondiente. En la terminal veremos algo como:

File | % Stmts | % Branch | % Funcs | % Lines |
---------------|---------|----------|--------|---------|
src/utils.ts | 85.71 | 100 | 75 | 85.71 |
src/main.ts | 50 | 50 | 50 | 50 |

Es una forma rápida de detectar archivos o secciones que nos faltó probar.

Conclusión

Usar Vitest para generar informes de cobertura es un paso pequeño pero útil dentro del flujo de trabajo. No se trata de alcanzar cifras perfectas, sino de tener más visibilidad sobre lo que estamos probando (y lo que no). Cuando combinamos cobertura con revisiones de código y pruebas bien pensadas, aumentamos la confianza en lo que estamos desarrollando.