BDD in JavaScript: Tests schreiben, die das Geschäft versteht

Wie erklärt man einem Programmierer, dass ein Bug nicht einfach "es funktioniert nicht" ist?

Haben Sie jemals eine Aufgabe im Stil bekommen: "Mach, dass der Button richtig funktioniert"? Oder, noch schlimmer, Code geschrieben, Tests waren grün, aber der Kunde sagt: "Nun, das ist nicht das, was ich wollte". Kommt Ihnen das bekannt vor? Willkommen in der Welt, in der BDD (Behaviour-Driven Development) in JavaScript zum Rettungsanker wird.

BDD ist nicht nur eine weitere modische Abkürzung. Es ist ein Ansatz, der Entwickler, Tester und Business-Analysten dazu bringt, dieselbe Sprache zu sprechen. Auf Deutsch, lebendig, ohne "Methodologien" und "Architekturparadigmen". Heute schauen wir uns an, wie man BDD in ein JavaScript-Projekt integriert, echte Tests schreibt und versteht, warum dies den Code sauberer und das Leben einfacher macht.

Was ist BDD und wie unterscheidet es sich von TDD?

Lassen Sie uns gleich Klarheit schaffen. BDD (Behaviour-Driven Development) ist eine Weiterentwicklung von TDD (Test-Driven Development). Wenn TDD sagt: "Schreibe zuerst den Test, dann den Code", fügt BDD hinzu: "Aber der Test muss für die Oma des Investors verständlich sein".

Die Kernidee von BDD: Wir testen das Verhalten des Systems, nicht seine interne Struktur. Wir fragen nicht: "Gibt die Funktion true zurück?". Wir fragen: "Kann der Benutzer ein Produkt in den Warenkorb legen und die Bestellsumme sehen?". Der Unterschied ist enorm.

Für BDD in JavaScript gibt es eine spezielle Sprache – Gherkin. Das ist ein Pseudo-Englisch (oder Pseudo-Deutsch), das wie eine Anleitung für einen Lego-Baukasten aussieht:

Funktionalität: Warenkorb\n  Als registrierter Benutzer\n  Möchte ich Produkte in den Warenkorb legen\n  Um den Gesamtpreis zu sehen\n\n  Szenario: Hinzufügen eines Produkts\n    Angenommen der Benutzer ist angemeldet\n    Wenn er das Produkt "Laptop" in den Warenkorb legt\n    Dann wird im Warenkorb 1 Produkt angezeigt\n    Und der Gesamtpreis beträgt 99900 Euro\n

Geben Sie zu, das liest sich wie eine Geschäftsanforderung, nicht wie Code. Und das ist der Hauptvorteil von BDD.

Werkzeuge für BDD in JavaScript

Um Behaviour-Driven Development in JavaScript zu betreiben, braucht man die richtigen Werkzeuge. Hier sind die drei Säulen, auf denen alles basiert:

\n
• Cucumber.js – das beliebteste Framework für BDD. Es parst Gherkin-Szenarien und verbindet sie mit Code.
\n
• Jest + Jest-Cucumber – wenn Sie bereits Jest verwenden, ist dies die ideale Wahl. Keine Magie, nur saubere Integration.
\n
• Mocha + Chai + Gherkin – für diejenigen, die gerne manuell bauen. Flexibel, aber mehr Code.
\n

Wir werden Cucumber.js verwenden, da es der Industriestandard ist. Die Installation ist einfach:

npm install @cucumber/cucumber --save-dev\n

Danach erstellen wir einen Ordner features/ – dort werden unsere .feature-Dateien leben. Und im Ordner step_definitions/ – der Code, der die Szenarien zum Leben erweckt.

Unseren ersten BDD-Test schreiben: Benutzeranmeldung

Stellen wir uns vor, wir entwickeln einen Online-Shop. Das Erste, was getestet werden muss, ist die Anmeldung. Erstellen Sie die Datei features/login.feature:

# language: de\nFunktionalität: Benutzeranmeldung\n  Als Besucher der Website\n  Möchte ich mich in mein Konto einloggen\n  Um meine Bestellungen zu verwalten\n\n  Szenario: Erfolgreicher Login mit korrekten Daten\n    Angenommen ich bin auf der Login-Seite\n    Wenn ich die E-Mail "user@example.com" und das Passwort "123456" eingebe\n    Und ich klicke auf den Button "Einloggen"\n    Dann sehe ich die Begrüßung "Willkommen, Ivan!"\n

Jetzt müssen wir die Schritte (Steps) schreiben – JavaScript-Code, der diese Aktionen ausführt. Erstellen Sie step_definitions/login.steps.js:

const { Given, When, Then } = require('@cucumber/cucumber');\nconst { expect } = require('chai');\n\n// Anwendungszustand (Simulation)\nlet currentPage = '';\nlet userEmail =