Snapshot Tests mit JEST

Automatisierte Tests von API-Contracts

Christa Gegendorfer, Rudolf Grötz

Jest [1] ist ein Open-Source-Framework für JavaScript-Unit-Tests, das von Facebook entwickelt wurde und zum Testen von JavaScript-Code, einschließlich React-Anwendungen, verwendet werden kann. 

Viele JavaScript-Frameworks benötigen zusätzlich Test Runner wie Mocha oder Jasmine und Assertion Bibliotheken wie Chai und Mocking Bibliotheken wie Sinon. Jest bringt all diese Komponenten bereits mit dem Basis-Setup mit. Jest fungiert als Test Runner, Assertion- und Mockingbibliothek. Jest hat nicht nur eine ähnliche Syntax wie andere Test- / Assertionsbibliotheken wie Jasmine und Chai, sondern kann außerdem Tests parallel ausführen und fungiert somit als der Ferrari unter den Java-Script Testframeworks.

[1] https://jestjs.io

Jest findet automatisch Tests mit der Dateierweiterungen test.js und führt diese aus. Zusätzlich bietet es eine hervorragende Integration mit Babel, was für Anwendungen hilfreich ist, die ES6-Funktionen verwenden. Im interaktiven Überwachungsmodus werden nur die Tests ausgeführt, die für die in den Dateien vorgenommenen Änderungen relevant sind. 

Eine hilfreiche zusätzliche Funktion von Jest ist das Testen von Snapshots. 

Snapshot-Tests sind nicht nur zum Testen von Grafischen Benutzeroberflächen nützlich, sondern können für verschiedene Zwecke verwendet werden können. Dieser Artikel zeigt, wie mit Snapshot-Tests das Testen von API-Contracts realisiert werden kann.

HOW SNAPSHOTS WORK

Im Gegensatz zu Test Driven Development, bei der die Standardpraxis darin besteht, zuerst fehlschlagende Tests und dann den Code zu schreiben damit die Tests bestanden werden, verfolgt das Snapshot-Testen einen anderen Ansatz. Beim Snapshot-Testen, müssen Sie zuerst Ihren Code entwickeln, beispielsweise eine REST-API, und dann einen Snapshot der erwarteten Ausgabe erstellen. 

Beim Snapshot-Testen wird der Output der aktuellen Durchführung mit dem Output einer früheren Durchführung (dem Snapshot, der Baseline) verglichen. Werden keine Unterschiede festgestellt, so ist der Test positiv. Die Vorgehensweise ist dem visuellen Regressionstest der End-to-End-Tests ziemlich ähnlich. Snapshot-Tests und visuelle Regressionstests sind jedoch zwei unterschiedliche Testmethoden und dienen unterschiedlichen Zwecken. 

Tools zum Testen der visuellen Regression machen Screenshots von Webseiten und vergleichen die resultierenden Bilder Pixel für Pixel. Mit Snapshot werden Testwerte serialisiert, in Textdateien gespeichert und mit einem Diff-Algorithmus verglichen. Snapshot-Tests basieren auf serialisierbaren Ausgaben wie Text oder JSON anstelle von Bildern. Es funktioniert mit jeder serialisierbaren Eingabe, was bedeutet, dass wir damit komplexe JSON-Strukturen (wie REST-APIs), JavaScript-Objekte und sogar DOM-Elemente vergleichen können.

Jest vergleicht die aktuelle Ausgabe mit dem Snapshot, der als valides Ergebnis gilt. Wenn der Test nicht bestanden wird, bedeutet dies möglicherweise, dass einige unerwartete Änderungen an der Komponente vorgenommen wurden, die Sie beheben müssen, oder dass Sie einige Änderungen an der Komponente vorgenommen haben und es an der Zeit ist, die Snapshot-Tests zu aktualisieren.

Der Test wird bestanden, wenn die Ausgänge gleich sind. Sollte dies nicht der Fall sein, schlägt der Test fehl und erzeugt einen Unterschied zwischen der erwarteten und der tatsächlich aufgezeichneten Ausgabe. Wenn Sie möchten, dass die Änderung akzeptiert wird, können Sie die Tests mit dem Flag —updateSnapshot ausführen. Dadurch wird die Snapshot-Datei mit den neuen Änderungen überschrieben, die wiederum der Quellcodeverwaltung übergeben werden.

Bei der Entwicklung und Wartung von REST-APIs ist es die Natur der Sache, dass der JSON-Response bei Bedarf geändert wird. Es kann notwendig sein, ein zusätzliches Feld aufzunehmen, oder den Inhalt eines bestehenden Feldes oder den Feldnamen zu ändern. Hier sollten automatisierte Tests zum Einsatz kommen, die unmittelbar Feedback geben, wenn so eine Änderung zu einem Problem wird. 

Jest-Snapshot-Tests eignen sich hervorragend für diesen Anwendungsfall, da die zu testenden Daten (der JSON-Response) serialisierbar ist!

API TESTING

Schauen wir uns nun ein Beispiel an! Dazu verwenden wir einen Express-Server der zwei API-Endpunkte zur Verfügung stellt: /employees und /employee/:id. Der erste Endpunkt liefert alle vorhandenen Mitarbeiter im JSON-Format zurück, der zweite Endpunkt einen bestimmten Mitarbeiter, der mittels der ID bestimmt wird. 

Auf einem System, auf dem NodeJS installiert ist, legen wir ein Arbeitsverzeichnis an, initialisieren das Projekt und installieren die notwendigen Softwarepakete mit dem Node Package Manager (npm):

Anschließend definieren wir in der Datei server.js den eigentlichen Server und die beiden Endpunkte:

Jetzt noch die Datei index.js erstellen, die den Server zum Leben erweckt:

und die Datei package.json um den Server und die Tests via npm starten zu können:

Der Server wird nun im Terminalfenster mit dem Kommando 

npm start

gestartet, und zeigt die Verfügbarkeit wie folgt an:Wir haben jetzt den Express-Server mit den beiden Endpunkten am Port 8888 laufen. Jetzt ist es an der Zeit, die Verfügbarkeit des Endpunktes zu prüfen. Geben Sie nun im Browser die URL http://localhost:8888/employees ein. Sofern der Server korrekt arbeitet, werden nun alle Mitarbeiter unformatiert im JSON-Format angezeigt. (Abb. 1)

SNAPSHOT TESTING

Nun erstellen wir unseren ersten Snapshot-Test um den /employees Endpunkt zu testen. Dazu legen wir ein Unterverzeichnis _ _tests_ _ und die Datei /employees.spec.js. mit folgendem Inhalt an:Wird dieser Test jetzt mit npm test durchgeführt, wird die Datei __tests__/__snapshots__/employees.spec.js.snap. angelegt. Diese Datei repräsentiert den Snapshot der automatisch beim ersten Durchlauf angelegt wird (Abb. 2).

Der Inhalt der Snapshot-Datei sieht wie folgt aus:Als aufmerksamer Leser, haben Sie bemerkt, dass die Datei server.js einen Fehler aufweist. Der Name des Autors dieser Zeilen ist falsch geschrieben. Wir ändern name: „Rudolf Groez” auf name: „Rudolf Groetz”, starten den Server mit npm start neu und führen den Test nochmals mit npm test durch. Der Test schlägt nun fehl, da im Snapshot noch der falsche Name steht, wie Abbildung 3 zeigt.

Durch diese Tests haben wir einen API-Contract definiert und setzen ihn durch. Natürlich werden additive Änderungen in der Regel als „in Ordnung” angesehen, da sie die Nutzung eines Endpunkts durch bestehende Konsumenten nicht „brechen”. Der Test muss nochmals mit npm test — -u durchgeführt werden, wodurch der Snapshot mit den neuen Daten überschrieben wird. Ein nochmaliger Test führt nun zu einem erfolgreichen Test (Abb. 4).

FAZIT

Snapshot-Tests sind nicht nur zum Testen von Grafischen Benutzeroberflächen nützlich, sondern können auch für das Testen von API-Contracts verwendet werden. Beim Snapshot-Testen wird der Output der aktuellen Durchführung mit dem Output einer früheren Durchführung (dem Snapshot, der Baseline) verglichen. Werden keine Unterschiede festgestellt, so ist der Test positiv. Jest bietet Snapshot-Tests Out-Of-Box an und eignet sich hervorragend für API-Contract Tests, da die zu testenden Daten (der JSON-Response) serialisierbar ist!