TDD in JavaScript: Wie Sie keine Angst mehr vor Bugs haben und mit Zuversicht coden

Warum TDD kein Modetrend, sondern Ihr neuer bester Freund ist

Stellen Sie sich vor: Sie schreiben Code, alles funktioniert perfekt. Sie starten die Anwendung – keine Bugs. Eine Woche später fügen Sie eine neue Funktion hinzu, und... alles geht kaputt. Kommt Ihnen das bekannt vor? Wenn Sie schon einmal Stunden mit der Suche nach einem Fehler verbracht haben, der durch eine zufällige Änderung in einem benachbarten Modul entstanden ist – dann ist dieser Artikel für Sie.

Test-Driven Development (TDD) ist nicht nur eine Methodik, sondern ein echter Rettungsanker für Entwickler. In der Welt von JavaScript, wo sich Code schneller ändert als das Wetter, hilft TDD, über Wasser zu bleiben. Lassen Sie uns verstehen, wie das funktioniert und warum Sie nach TDD nicht mehr auf die alte Weise coden können.

Was TDD wirklich ist (Spoiler: Es geht nicht um Tests)

Viele denken, TDD sei einfach "Tests vor dem Code schreiben". Aber in Wirklichkeit ist es eine Designphilosophie. TDD zwingt Sie dazu, darüber nachzudenken, wie Ihr Code verwendet wird, bevor Sie ihn schreiben. Es ist wie ein Architekt, der zuerst den Bauplan zeichnet und dann mit dem Bauen beginnt.

Der TDD-Zyklus besteht aus drei Schritten (oft als "Red-Green-Refactor" bezeichnet):

\n
• Red: Schreiben Sie einen Test, der garantiert fehlschlägt (weil die Funktionalität noch nicht existiert).
\n
• Green: Schreiben Sie den minimalen Code, damit der Test besteht.
\n
• Refactor: Verbessern Sie den Code, ohne sein Verhalten zu ändern (die Tests garantieren, dass Sie nichts kaputt gemacht haben).
\n

Und ja, dieser Zyklus wird für jede kleine Einheit der Funktionalität wiederholt. Klingt nach einer Verlangsamung? Vielleicht. Aber auf lange Sicht sparen Sie Stunden beim Debuggen.

Warum JavaScript ideal für TDD ist

JavaScript ist eine dynamische Sprache. Das ist seine Stärke und Schwäche. Laufzeitfehler sind an der Tagesordnung, besonders in großen Projekten. TDD verwandelt JavaScript von einem "flexiblen, aber zerbrechlichen" Werkzeug in eine zuverlässige Plattform.

Außerdem ist das JS-Ökosystem reich an Testwerkzeugen: Jest, Mocha, Chai, Jasmine. Wir werden Jest verwenden – es ist einfach, leistungsstark und beliebt. Wenn Sie Jest noch nicht kennen, keine Sorge: Wir beginnen mit den Grundlagen.

Praxis: Einen Taschenrechner mit TDD schreiben

Theorie ist gut, aber lassen Sie uns zu echtem Code übergehen. Wir schreiben einen einfachen Taschenrechner mit TDD. Das ist ein klassisches Beispiel, zeigt aber den Prozess hervorragend.

Schritt 1: Projekt einrichten

Erstellen Sie einen neuen Ordner und initialisieren Sie das Projekt:

mkdir tdd-calculator\ncd tdd-calculator\nnpm init -y\nnpm install --save-dev jest\n

Fügen Sie ein Skript in package.json hinzu:

"scripts": {\n  "test": "jest"\n}\n

Schritt 2: Rot – Test für Addition schreiben

Erstellen Sie die Datei calculator.test.js:

// calculator.test.js\nconst { add } = require('./calculator');\n\ndescribe('Calculator', () => {\n  test('adds 2 + 3 to equal 5', () => {\n    expect(add(2, 3)).toBe(5);\n  });\n});\n

Führen Sie den Test aus: npm test. Er wird mit einem Fehler fehlschlagen, weil die Funktion add nicht existiert. Das ist normal – das ist die rote Phase.

Schritt 3: Grün – Minimalen Code schreiben

Erstellen Sie calculator.js:

// calculator.js\nfunction add(a, b) {\n  return a + b;\n}\n\nmodule.exports = { add };\n

Führen Sie den Test erneut aus. Grün? Ausgezeichnet! Wir haben gerade die grüne Phase durchlaufen.

Schritt 4: Refactoring

Der Code ist einfach, es gibt nichts zu refaktorisieren. Aber stellen Sie sich vor, wir möchten eine Typprüfung hinzufügen. TDD ermöglicht dies sicher: zuerst der Test, dann der Code.

// calculator.test.js\ntest('throws error if arguments are not numbers', () => {\n  expect(() => add('2', 3)).toThrow('Arguments must be numbers');\n});\n

Jetzt modifizieren wir add: