TDD in TypeScript: Code ohne Angst und Vorwurf schreiben

Hör auf zu raten: Warum TDD kein Masochismus, sondern eine Superkraft ist

Stell dir vor: Du schreibst Code. Alles funktioniert. Du bist zufrieden. Einen Monat später kehrst du zum Projekt zurück, nimmst eine kleine Änderung vor – und alles geht kaputt. Kommt dir bekannt vor? Und jetzt stell dir vor, du hast ein Sicherheitsnetz, das jeden Fehler in Sekundenschnelle abfängt. Das ist TDD in TypeScript – testgetriebene Entwicklung.

Viele Entwickler denken, TDD sei etwas für Perfektionisten oder für NASA-Projekte. Spoiler: Das stimmt nicht. Test Driven Development ist ein Werkzeug, das Stunden des Debuggens spart, die Codequalität verbessert und Refactoring sicher macht. In diesem Artikel schlüsseln wir TDD TypeScript anhand realer Beispiele auf, ohne unnötige Theorie und Abstraktionen.

Wenn du in TypeScript schreibst und keine Angst mehr vor deinen eigenen Änderungen haben willst – lies weiter. Es wird interessant.

Was ist TDD (und warum es nicht um "Tests schreiben" geht)

TDD (Test-Driven Development) ist eine Methodik, bei der Tests vor dem Code geschrieben werden. Klingt verrückt? Nur auf den ersten Blick. Der TDD-Zyklus besteht aus drei Schritten:

\n
1. Rot (Red) – Schreibe einen Test, der garantiert fehlschlägt, weil es den Code noch nicht gibt.
\n
2. Grün (Green) – Schreibe minimalen Code, damit der Test besteht.
\n
3. Refactoring (Refactor) – Verbessere den Code, ohne sein Verhalten zu ändern.
\n

Und so weiter – im Kreis. Jedes neue Funktionsstück beginnt mit einem Test. Das diszipliniert, zwingt dazu, vorab über das API-Design nachzudenken, und gibt die Gewissheit, dass alles wie am Schnürchen läuft.

Übrigens: Unit-Tests in TypeScript sind nicht nur eine "Funktionsprüfung". Sie sind Dokumentation, Spezifikation und Versicherung in einem.

Werkzeuge für TDD in TypeScript: Was installiert werden muss

Für TypeScript-Testing benötigen wir:

\n
• Jest – das beliebteste Test-Framework. Funktioniert out-of-the-box mit TypeScript.
\n
• ts-jest – ein Preset für Jest, damit es TypeScript ohne zusätzliche Konfiguration versteht.
\n
• @types/jest – Typen für die Autovervollständigung in der IDE.
\n

Installation mit einem Befehl:

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

Füge in package.json ein Skript zum Ausführen der Tests hinzu:

"scripts": {\n  "test": "jest",\n  "test:watch": "jest --watch"\n}

Jetzt ist alles bereit für die testgetriebene Entwicklung in TypeScript.

Den ersten Test mit TDD schreiben: Von Rot zu Grün

Angenommen, wir müssen eine Funktion schreiben, die prüft, ob ein String ein Palindrom ist. Nach der TDD-Klassik – beginnen wir mit dem Test.

Schritt 1. Rot (Red)

Erstelle die Datei isPalindrome.test.ts:

import { isPalindrome } from './isPalindrome';\n\ndescribe('isPalindrome', () => {\n  it('sollte true für den String "racecar" zurückgeben', () => {\n    expect(isPalindrome('racecar')).toBe(true);\n  });\n\n  it('sollte false für den String "hello" zurückgeben', () => {\n    expect(isPalindrome('hello')).toBe(false);\n  });\n});

Führe den Test aus:

npm test

Wir sehen einen Fehler: Cannot find module './isPalindrome'. Perfekt, die rote Phase ist abgeschlossen. Jetzt müssen wir Code schreiben, damit der Test besteht.

Schritt 2. Grün (Green)

Erstelle isPalindrome.ts mit einer minimalen Implementierung:

export function isPalindrome(str: string): boolean {\n  return str === str.split('').reverse().join('');\n}

Führe die Tests erneut aus – grün! Beide Tests bestehen. Aber das ist noch nicht alles.

Schritt 3. Refactoring (Refactor)

Unsere Funktion funktioniert, aber es gibt einen Haken: Sie verarbeitet keine Strings mit Leerzeichen und unterschiedlicher Groß-/Kleinschreibung. Fügen wir einen neuen Test hinzu:

it('sollte Groß-/Kleinschreibung und Leerzeichen ignorieren',