Testen in TypeScript: Überblick über Frameworks und Tools

Testen in TypeScript: Überblick über moderne Frameworks und Tools

TypeScript ist eine streng typisierte Obermenge von JavaScript, die in der modernen Webentwicklung aktiv eingesetzt wird. Die Typisierung allein garantiert jedoch nicht die Abwesenheit von logischen Fehlern. Zur Sicherstellung der Codequalität ist ein fundiertes Testen erforderlich. In diesem Artikel betrachten wir die wichtigsten Frameworks und Tools zum Testen von TypeScript-Anwendungen, ihre Besonderheiten und Anwendungsbeispiele.

Warum TypeScript-Code testen?

Obwohl TypeScript die Typen bereits zur Kompilierzeit prüft, schützt es nicht vor Laufzeitfehlern, fehlerhafter Geschäftslogik oder Regressionen. Tests helfen dabei:

• Fehler zu entdecken, bevor sie in die Produktion gelangen;
• Das Verhalten von Funktionen und Modulen zu dokumentieren;
• Refactoring und Code-Wartung zu vereinfachen;
• Den Entwicklungsprozess durch Automatisierung von Prüfungen zu beschleunigen.

Beliebte Frameworks zum Testen von TypeScript

1. Jest – die universelle Wahl

Jest ist das beliebteste Framework, entwickelt von Facebook. Es unterstützt TypeScript „out of the box“ über das Paket ts-jest oder die Konfiguration von Babel. Jest enthält einen Test-Runner, eine Assertion-Bibliothek, Mocking und Coverage-Berichte.

Installation und Einrichtung:

npm install --save-dev jest ts-jest @types/jestnpx ts-jest config:init

Beispiel eines Unit-Tests für eine Additionsfunktion:

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

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

describe('sum function', () => {  test('adds 1 + 2 to equal 3', () => {    expect(sum(1, 2)).toBe(3);  });

  test('adds negative numbers', () => {    expect(sum(-1, -2)).toBe(-3);  });});

2. Vitest – schnelle Alternative für Vite-Projekte

Vitest ist ein modernes Framework, das Vite zum Bauen verwendet. Es ist kompatibel mit der Jest-API, arbeitet aber dank nativer Unterstützung für ES-Module und HMR deutlich schneller. Es eignet sich hervorragend für Projekte mit Vue, React oder Svelte.

Beispiel einer Konfiguration:

// vitest.config.tsimport { defineConfig } from 'vitest/config';

export default defineConfig({  test: {    globals: true,    environment: 'node',  },});

Test mit describe/it:

import { describe, it, expect } from 'vitest';

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

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

3. Mocha + Chai – flexible Klassiker

Mocha ist ein flexibler Test-Runner, der oft zusammen mit der Assertion-Bibliothek Chai verwendet wird. Für TypeScript müssen zusätzlich ts-node und @types/mocha installiert werden. Mocha bietet zahlreiche Plugins und Anpassungsmöglichkeiten.

Beispiel:

import { expect } from 'chai';

function greet(name: string): string {  return `Hello, ${name}!`;}

describe('greet', () => {  it('should return a greeting', () => {    expect(greet('Alex')).to.equal('Hello, Alex!');  });});

Tools für End-to-End (E2E) Tests

4. Playwright – modernes E2E-Tool

Playwright von Microsoft unterstützt TypeScript nativ und ermöglicht das Testen von Chromium, Firefox und WebKit. Es kann mit Netzwerkanfragen umgehen, mobile Geräte emulieren und Screenshots erstellen.

Installation:

npm init playwright@latest

Beispiel eines Tests zur Überprüfung des Seitentitels:

import { test, expect } from '@playwright/te