Code Coverage in TypeScript: Die besten Tools und Metriken

Code Coverage in TypeScript: Wie man aufhört zu raten und anfängt zu messen

Stellen Sie sich vor, Sie bauen einen komplexen Mechanismus mit vielen Zahnrädern. Sie sind sicher, alles richtig zusammengebaut zu haben, aber sobald Sie den Startknopf drücken, ertönt ein Knirschen und der Mechanismus blockiert. Eine vertraute Situation? In der Welt der TypeScript-Entwicklung sind solche „Mechanismen“ unsere Anwendungen. Und Code Coverage ist die Kontrollmontage, die zeigt, welche Teile wir überprüft haben und welche wir dem Zufall überlassen haben.

Viele Entwickler stehen Metriken zur Code Coverage skeptisch gegenüber: „Die Jagd nach Prozenten ist böse“, „100% Coverage garantiert keine fehlerfreie Software“. Und das stimmt. Aber wie jedes Werkzeug kann Code Coverage nützlich oder schädlich sein – alles hängt davon ab, wie man es einsetzt. In diesem Artikel werden wir untersuchen, wie man Coverage in TypeScript richtig misst, welche Tools es dafür gibt und wie man Metriken nicht zum Selbstzweck macht.

Was ist Code Coverage und warum TypeScript keine Ausnahme ist

Code Coverage ist eine Metrik, die angibt, welcher Teil des Quellcodes während der Tests ausgeführt wurde. In TypeScript, das nach JavaScript kompiliert wird, erfolgt die Coverage-Messung auf der Ebene des kompilierten Codes, aber moderne Tools können die Ergebnisse schön in Begriffen des ursprünglichen TS-Codes darstellen.

Die wichtigsten Coverage-Metriken, die Sie kennen sollten:

\n
• Line coverage – Prozentsatz der Codezeilen, die mindestens einmal ausgeführt wurden.
\n
• Branch coverage – Prozentsatz der Verzweigungen (if/else, switch, ternäre Operatoren), die getestet wurden.
\n
• Function coverage – Prozentsatz der Funktionen/Methoden, die aufgerufen wurden.
\n
• Statement coverage – Prozentsatz der einzelnen Anweisungen (Operatoren) im Code.
\n

Für TypeScript-Projekte ist besonders die Branch coverage wichtig, da die strenge Typisierung nicht vor logischen Fehlern in Bedingungen schützt. Sie können alle Variablen korrekt typisieren, aber den Fall vergessen, dass ein Array leer ist, während eine Funktion mindestens ein Element erwartet.

Tools zur Messung der Code Coverage in TypeScript

1. Istanbul (nyc) – der Urvater aller Coverage-Tools

Istanbul ist das beliebteste Tool zur Messung der Code Coverage von JavaScript- und TypeScript-Code. Es funktioniert als eigenständiges Dienstprogramm (über das Paket nyc) oder als integriertes Modul in Test-Frameworks.

Um mit Istanbul in einem TypeScript-Projekt zu beginnen, installieren Sie:

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

Erstellen Sie eine Konfigurationsdatei .nycrc:

{\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}

Tests mit Coverage ausführen:

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

Istanbul generiert Berichte in der Konsole (text) und als HTML-Seiten, auf denen abgedeckter Code grün und nicht abgedeckter Code rot hervorgehoben wird. Das ist sehr anschaulich.

2. Jest – alles in einem

Jest ist das beliebteste Test-Framework für TypeScript. Es enthält bereits ein integriertes Coverage-Tool basierend auf Istanbul. Sie müssen nichts zusätzlich installieren.

Grundlegende Konfiguration in 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