Mock-Objekte und Fixtures in JavaScript: Wie man bei Tests nicht verrückt wird

Mock-Objekte und Fixtures in JavaScript: Ihr Test-Arsenal

Stellen Sie sich vor, Sie schreiben ein Modul, das Anfragen an eine externe Wetter-API sendet. Sie führen die Tests aus – und sie schlagen fehl, weil die API vorübergehend nicht erreichbar ist. Oder schlimmer: Sie testen ein Zahlungssystem, und jeder Durchlauf bucht echtes Geld von der Karte ab. Kommt Ihnen das bekannt vor? Willkommen in der Welt, in der Mock-Objekte und Fixtures in JavaScript Ihre besten Freunde werden.

In diesem Artikel werden wir nicht nur Definitionen auflisten. Wir werden analysieren, wie Sie mit Mocks, Stubs und Fixtures Tests schnell, zuverlässig und unabhängig von der Außenwelt machen. Sie erfahren, wie Sie Timer austricksen, HTTP-Anfragen ersetzen und ideale Testdaten vorbereiten. Los geht's!

Warum braucht man Mocks und Fixtures? Schmerz und Rettung

Wenn Sie Unit-Tests in JavaScript schreiben, möchten Sie nur ein einziges Modul testen. Aber echter Code hängt oft von Datenbanken, Dateisystemen, Netzwerkaufrufen oder Zufallszahlen ab. Ohne Mocks ist jeder Test eine Lotterie: Er kann aufgrund eines Netzwerk-Timeouts fehlschlagen oder weil der Server andere Daten zurückgegeben hat.

Mock-Objekte sind Ersatz für reale Abhängigkeiten. Sie imitieren das Verhalten der Originalobjekte, aber Sie haben die vollständige Kontrolle über ihre Antworten. Fixtures sind vorbereitete Datensätze (z. B. JSON mit einer API-Antwort), die Sie in Tests einsetzen. Zusammen verleihen sie Ihnen Superkräfte: Sie testen die Logik, nicht die Infrastruktur.

Mock vs Stub vs Spy: Begriffe klären

Bevor wir Code schreiben, bringen wir Ordnung in die Begriffe. Im JavaScript-Ökosystem (insbesondere bei Jest und Mocha) werden diese Konzepte manchmal vermischt, aber die Unterschiede sind wichtig:

\n
• Mock – Ein Objekt, das eine reale Abhängigkeit ersetzt und es Ihnen ermöglicht, ein erwartetes Verhalten festzulegen. Sie sagen: „Wenn die Methode getUser mit id=5 aufgerufen wird, gib das Objekt {name: 'Alice'} zurück.“
\n
• Stub – Eine vereinfachte Version eines Mocks. Es gibt einfach feste Daten zurück, ohne zu überprüfen, wie es aufgerufen wurde. Wird oft verwendet, um Funktionen zu ersetzen, die Zufallswerte zurückgeben.
\n
• Spy – Ein Wrapper um eine reale Funktion. Es ändert deren Verhalten nicht, zeichnet aber auf, wie oft sie aufgerufen wurde, mit welchen Argumenten und was sie zurückgegeben hat. Ideal zum Überprüfen von Nebeneffekten.
\n

In den meisten modernen Frameworks (Jest, Sinon.js) können Mocks alles: sowohl die Implementierung ersetzen als auch ausspionieren. Aber das Verständnis der Unterschiede hilft Ihnen, aussagekräftigere Tests zu schreiben.

Fixtures: So bereiten Sie Testdaten vor

Fixtures in JavaScript-Tests sind einfach Daten, die Sie in separate Dateien oder Variablen auslagern. Warum ist das nötig? Erstens, um keine 50-zeiligen JSON-Objekte in jedem Test zu duplizieren. Zweitens, um schnell Szenarien zu wechseln: ein Fixture für eine erfolgreiche Antwort, ein anderes für einen Fehler.

Beispiel für ein einfaches Fixture zum Testen eines Moduls für die Benutzerverwaltung:

// fixtures/users.js\nexport const userAlice = {\n  id: 1,\n  name: 'Alice',\n  email: 'alice@example.com',\n  role: 'admin'\n};\n\nexport const userBob = {\n  id: 2,\n  name: 'Bob',\n  email: 'bob@example.com',\n  role: 'user'\n};\n\nexport const apiResponseSuccess = {\n  status: 200,\n  data: { users: [userAlice, userBob] }\n};\n\nexport const apiResponseError = {\n  status: 500,\n  message: 'Internal Server Error'\n};\n

Jetzt importieren wir diese Objekte einfach in die Tests. Das macht den Code sauberer und ermöglicht es, Fälle leicht zu reproduzieren: „Was ist, wenn der Server eine 500 zurückgegeben hat?“.

Mock in Jest: Praktische Beispiele

Jest ist das beliebteste Test-Framework für JavaScript. Es ist in Create React App, Next.js und viele andere Tools integriert. Schauen wir uns an, wie man Mock-Objekte in Jest erstellt.

Mock-Funktionen mit jest.fn()

Angenommen, wir haben eine Funktion, die einen Callback nach der Datenverarbeitung aufruft.