Cobertura de código en TypeScript: mejores herramientas y métricas

Cobertura de código en TypeScript: cómo dejar de adivinar y empezar a medir

Imagine que está ensamblando un mecanismo complejo con muchos engranajes. Está seguro de que lo ha montado todo correctamente, pero al presionar el botón "Inicio", se oye un chirrido y el mecanismo se atasca. ¿Le suena familiar? En el mundo del desarrollo con TypeScript, esos "mecanismos" son nuestras aplicaciones. Y la cobertura de código con pruebas es el ensamblaje de control que muestra qué piezas hemos verificado y cuáles hemos dejado al azar.

Muchos desarrolladores son escépticos con respecto a las métricas de cobertura: "La obsesión por los porcentajes es mala", "El 100% de cobertura no garantiza la ausencia de errores". Y es cierto. Pero, como cualquier herramienta, la cobertura de código puede ser útil o perjudicial, todo depende de cómo se utilice. En este artículo, analizaremos cómo medir correctamente la cobertura en TypeScript, qué herramientas existen para ello y cómo no convertir las métricas en un fin en sí mismas.

Qué es la cobertura de código y por qué TypeScript no es una excepción

Cobertura de código (code coverage) es una métrica que muestra qué parte del código fuente se ejecutó durante las pruebas. En TypeScript, que se compila a JavaScript, la medición de la cobertura se realiza a nivel del código compilado, pero las herramientas modernas pueden mostrar los resultados en términos del código TS original.

Las métricas de cobertura principales que debe conocer:

\n
• Line coverage — porcentaje de líneas de código que se ejecutaron al menos una vez.
\n
• Branch coverage — porcentaje de bifurcaciones (if/else, switch, operadores ternarios) que fueron probadas.
\n
• Function coverage — porcentaje de funciones/métodos que fueron invocados.
\n
• Statement coverage — porcentaje de instrucciones (sentencias) individuales en el código.
\n

Para proyectos TypeScript, la branch coverage es especialmente importante, ya que el tipado estricto no protege contra errores lógicos en las condiciones. Puede tipificar correctamente todas las variables, pero olvidar el caso en que un array está vacío y la función espera al menos un elemento.

Herramientas para medir la cobertura en TypeScript

1. Istanbul (nyc) — el abuelo de todas las coberturas

Istanbul es la herramienta más popular para medir la cobertura de código JavaScript y TypeScript. Funciona como una utilidad independiente (a través del paquete nyc) o como un módulo integrado en los frameworks de pruebas.

Para empezar a trabajar con Istanbul en un proyecto TypeScript, instale:

npm install --save-dev nyc typescript ts-node

Cree un archivo .nycrc para la configuración:

{\n  "extends": "@istanbuljs/nyc-config-typescript",\n  "all": true,\n  "include": ["src/**/*.ts"],\n  "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"],\n  "reporter": ["text", "html", "lcov"],\n  "check-coverage": true,\n  "branches": 80,\n  "lines": 85,\n  "functions": 85,\n  "statements": 85\n}

Ejecución de pruebas con cobertura:

npx nyc mocha --require ts-node/register src/**/*.test.ts

Istanbul genera informes en la consola (text) y en forma de páginas HTML, donde el código cubierto se resalta en verde y el no cubierto en rojo. Es muy visual.

2. Jest — todo en uno

Jest es el framework de pruebas más popular para TypeScript. Ya incluye una herramienta de cobertura integrada basada en Istanbul. No necesita instalar nada adicional.

Configuración básica en jest.config.ts:

import type { Config } from 'jest';\n\nconst config: Config = {\n  preset: 'ts-jest',\n  testEnvironment: 'node',\n  collectCoverage: true,\n  coverageDirectory: 'coverage',\n  coverageReporters: ['text', 'html', 'lcov'],\n  collectCoverageFrom: [\n    'src/**/*.ts',\n    '!src/**/*.test.ts',\n    '!src/**/*.spec.ts',\n    '!src/types/**/*.ts'\n  ],\n  coverageThresho