vitest für TypeScript: Komplette Anleitung

vitest ist ein modernes, schnelles und leistungsstarkes Framework für Modultests, das speziell für die TypeScript- und JavaScript-Ökosysteme entwickelt wurde. Es ist eine direkte Alternative zu Jest, legt aber den Fokus auf hohe Geschwindigkeit und native Vite-Unterstützung. Wenn Sie Vite für Ihr Projekt-Build verwenden, ist vitest die ideale Wahl, da es dasselbe Plugin und dieselbe Konfiguration wie Ihr Haupt-Build-Tool nutzt.

Warum vitest? Erstens ist es unglaublich schnell, dank der Nutzung von esbuild für die Transpilierung und der nativen Unterstützung von ESM (ECMAScript Modules). Zweitens bietet es eine umfangreiche, mit Jest kompatible API, was die Migration vereinfacht. Drittens bietet vitest integrierte Unterstützung für TypeScript, JSX, Mocking, Code Coverage und Snapshot-Tests – ohne zusätzliche Pakete installieren zu müssen. Das macht es zum idealen Werkzeug sowohl für kleine Projekte als auch für große Enterprise-Anwendungen.

Auf dieser Bildungsseite von PythonLib zeigen wir Ihnen, wie Sie vitest zum Testen von TypeScript-Code einsetzen. Sie lernen, wie Sie die Bibliothek installieren, Ihre ersten Tests schreiben, die wichtigsten Methoden beherrschen und typische Fehler vermeiden. Am Ende dieses Artikels können Sie vitest sicher in Ihren eigenen Projekten anwenden.

Installation

Die Installation von vitest erfolgt über npm oder yarn. Für ein TypeScript-Projekt benötigen Sie außerdem TypeScript selbst und die Typen für Node.js (wenn Sie serverseitigen Code testen).

npm install -D vitest typescript @types/node

Wenn Sie yarn verwenden:

yarn add -D vitest typescript @types/node

Fügen Sie nach der Installation ein Skript in Ihre package.json ein:

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run"
  }
}

Der Befehl vitest startet die Tests im Watch-Modus (automatischer Neustart bei Änderungen), während vitest run einen einmaligen Durchlauf ausführt.

Schnellstart

Erstellen Sie eine Datei sum.ts mit einer einfachen Funktion:

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

Erstellen Sie nun eine Testdatei sum.test.ts:

// sum.test.ts
import { describe, it, expect } from 'vitest';
import { 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);
  });
});

Starten Sie die Tests:

npm run test

Sie sehen eine grüne Ausgabe mit der Meldung, dass alle Tests bestanden wurden. Herzlichen Glückwunsch, Sie haben Ihren ersten vitest-Test geschrieben!

Wichtige Methoden und Funktionen

vitest bietet eine umfangreiche API zum Schreiben von Tests. Nachfolgend finden Sie 8 wichtige Methoden mit Beschreibung und Beispielen.

1. describe

Signatur: describe(name: string, fn: () => void): void

Beschreibung: Gruppiert zusammengehörige Tests in einem Block. Verbessert die Lesbarkeit und ermöglicht die Anwendung von Hooks (beforeEach, afterEach) auf die Gruppe.

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

describe('Math operations', () => {
  it('should add', () => {
    expect(1 + 1).toBe(2);
  });

  it('should subtract', () => {
    expect(5 - 3).toBe(2);
  });
});

2. it / test

Signatur: it(name: string, fn: () => void | Promise<void>, timeout?: number): void

Beschreibung: Definiert einen einzelnen Test. Sie können sowohl it als auch test verwenden – beide sind Synonyme.

import { it, expect } from 'vitest';

it('should return true