Testen in TypeScript: Frameworks und Werkzeuge

Testen in TypeScript: Frameworks, Werkzeuge und bewährte Praktiken

TypeScript ist eine statisch typisierte Erweiterung von JavaScript, die aktiv in modernen Webprojekten eingesetzt wird. Die Typisierung allein garantiert jedoch nicht das Fehlen von logischen Fehlern, Laufzeitfehlern oder einer fehlerhaften Funktionsweise von Komponenten. Daher ist das Testen von TypeScript-Anwendungen ein obligatorischer Schritt in der Entwicklung. In diesem Artikel werden wir die wichtigsten Frameworks und Werkzeuge zum Testen von TypeScript, ihre Besonderheiten, Anwendungsbeispiele und Empfehlungen zur Auswahl im Detail besprechen.

1. Warum unterscheidet sich das Testen von TypeScript von JavaScript?

TypeScript fügt eine statische Typprüfung hinzu, ersetzt aber keine Unit-Tests, Integrationstests oder E2E-Tests. TypeScript bietet jedoch Vorteile:

Typsicherheit – der Compiler fängt viele Fehler bereits in der Entwicklungsphase ab.
Bessere IDE-Unterstützung – Autovervollständigung, Refactoring, Navigation.
Sauberer Testcode – Typen helfen, Fehler in den Tests selbst zu vermeiden.

Dabei arbeiten Frameworks zum Testen von TypeScript in der Regel über Transpilation (ts-jest, esbuild, swc) oder nutzen die integrierte TypeScript-Unterstützung.

2. Wichtigste Frameworks für Unit-Tests

Jest

Das beliebteste Framework zum Testen von JavaScript und TypeScript. Wird von Facebook unterstützt, verfügt über eine integrierte Assertion-Bibliothek, Mocks, Spione und Codeabdeckung.

Installation und Konfiguration:

npm install --save-dev jest @types/jest ts-jest typescript

Konfiguration in jest.config.ts:

export default {  preset: 'ts-jest',  testEnvironment: 'node',  roots: ['<rootDir>/src']};

Beispieltest:

// sum.tsexport function sum(a: number, b: number): number {  return a + b;}

// sum.test.tsimport { sum } from './sum';

describe('sum function', () => {  it('should add two numbers correctly', () => {    expect(sum(2, 3)).toBe(5);  });

  it('should handle negative numbers', () => {    expect(sum(-1, -2)).toBe(-3);  });});

Vitest

Ein modernes Pendant zu Jest, optimiert für Vite-Projekte. Zeichnet sich durch hohe Geschwindigkeit aus, da es unter der Haube esbuild/swc verwendet. Vollständig kompatibel mit TypeScript out-of-the-box.

Installation:

npm install --save-dev vitest

Beispieltest (ohne zusätzliche Konfiguration):

// utils.tsexport const capitalize = (str: string): string => {  return str.charAt(0).toUpperCase() + str.slice(1);};

// utils.test.tsimport { describe, it, expect } from 'vitest';import { capitalize } from './utils';

describe('capitalize', () => {  it('should capitalize first letter', () => {    expect(capitalize('hello')).toBe('Hello');  });

  it('should handle empty string', () => {    expect(capitalize('')).toBe('');  });});

Mocha + Chai

Das klassische Duo für flexibles Testen. Mocha ist ein Test-Runner, Chai eine Bibliothek für Assertions. Erfordert zusätzliche Konfiguration für TypeScript.

Installation:

npm install --save-dev mocha chai @types/mocha @types/chai ts-node typescript

Beispiel:

import { expect } from 'chai';import { describe, it } from 'mocha';

function multiply(a: number, b: number): number {  return a * b;}

describe('multiply', () => {  it('should multiply two numbers', () => {    expect(multiply(3, 4)).to.equal(12);  });

  it('should handle zero', () => {    expect(multiply(5, 0)).to.equal(0);  });});