How-To

JavaScript-Code testen: Jasmine, Mocha und Jest im Vergleich

Seite 2 / 2

Tests im Browser durchführen dank Karma

Frameworks wie Jasmine und Mocha konzentrieren sich auf die Implementierung von Tests und nicht auf die Infrastruktur. ­Gerade Frontend-­Tests müssen jedoch im Browser laufen und an genau dieser Stelle kommt der Test-Runner Karma ins Spiel – eine Infrastruktur­komponente, mit der sich Browser fernsteuern lassen. Karma ist unabhängig vom Test-Framework. Installieren können Entwickler den Test-Runner über einen Paketmanager wie NPM. Danach konfigurieren sie Karma auf der Kommandozeile mit dem Befehl karma init. Ein interaktiver Assistent führt durch den Erstellungsprozess der Konfigurationsdatei, die standard­mäßig den Namen karma.conf.js trägt. Diese Datei besteht aus JavaScript-Quellcode, der unter Node.js läuft. Entwickler können also auch eine einfache Logik einbauen. Karma hat eine Plugin-Infrastruktur, sodass Entwickler zum Beispiel das Paket „karma-jasmine“ installieren können, um ­Karma und ­Jasmine zu verbinden. Neben den Test-Frameworks ist Karma auch bei der Ansteuerung der Browser flexibel. So lassen sich über verschiedene Launcher-­Pakete unterschiedliche ­Browser ­automatisch ­starten, sofern der Browser auf dem ­System ­installiert ist, auf dem Karma läuft. Andernfalls kann man einen Browser bei Karma remote registrieren. Häufig führen Entwickler Tests auf einem Continuous-Integration-Server aus, der meist über keine grafische Oberfläche verfügt. Dann können sie einen Headless Browser ohne grafische Ausgabe verwenden.

Jasmine, das Urgestein

Von den drei populären JavaScript-Frameworks ist Jasmine mit dem ältesten initialen Commit im Repository – nämlich vom ­November 2008. In der schnelllebigen JavaScript-Welt ist Jasmine damit ein Urgestein. Das allein ist jedoch noch kein Garant für Qualität. Weitere Qualitätsmerkmale sind die Downloadzahlen auf Npmjs.com, der Plattform hinter dem NPM-Package-Manager (Jasmine hat hier wöchentlich über zwei Millionen Downloads), die Bewertungssterne bei GitHub, das Verhältnis von offenen zu geschlossenen Issues, die Anzahl von Releases sowie das Datum des letzten Releases, also die Aktualität des Frameworks.

Wie schon erwähnt, lässt sich Jasmine sowohl client- als auch serverseitig einsetzen. Für serverseitige Tests müssen Ent­wickler nur das Paket „jasmine-core“ installieren. Für clientseitige Tests gibt es eine Stand-alone-Variante, die die Tests über ein ­Runner-Script in einer HTML-Datei ausführt. Viel ­häufiger kommt jedoch die Kombination von Karma und Jasmine zum Einsatz. Jasmine ist darüber ­hinaus nicht nur plattform­unabhängig, es soll auch einen möglichst kleinen Kern behalten. Aus diesem Grund besitzt das jasmine-core-Paket auch keine ­externen ­Abhängigkeiten. Dennoch enthält Jasmine die ­wichtigsten ­Elemente, um Tests zu formulieren. Der Kern der Tests sind bei Jasmine die Matcher. Um eine Bedingung zu überprüfen, erhält die expect-Funktion den entsprechenden Wert. Anschließend kommt ein Matcher zur Anwendung, der prüft, ob die ­Bedingung erfüllt ist. Neben den üblichen Use Cases lassen sich auch ­Fehlerfälle und Exceptions testen. Außerdem kann Jasmine mit Asynchronität umgehen. Das Framework enthält bereits die wichtigsten Matcher. Reichen diese nicht aus, können Entwickler mit relativ geringem Aufwand weitere selbst definieren.

Die Test-Doubles von Jasmine gehen über diesen grund­legenden Funktionsumfang deutlich hinaus. Mit dem Spy-­Feature lassen sich beispielsweise Funktionen überwachen und nahezu alle Aspekte inspizieren – etwa die Anzahl der Aufrufe, die Argumente oder Rückgabewerte. Noch einen Schritt weiter geht das Feature Stubs. Damit kann ein Entwickler das ­Verhalten von Funktionen definieren und so beispielsweise festlegen, dass eine bestimmte Funktion beim Aufruf einen vorbestimmten Wert zurückliefert. Stubs ersetzen so Abhängigkeiten zu Bibliotheken oder anderen Systemen, was die Stabilität und Laufzeit der Tests verbessert. In eine ähnliche Richtung geht das Clock-Feature von Jasmine für die Zeitkontrolle, Sprach-Features wie ­setTimeout, setInterval oder das Date-Objekt. Jasmine ist letztlich auch deshalb so verbreitet, weil große JavaScript-­Frameworks wie ­Angular es standardmäßig mit ausliefern und es eine ­vorgefertigte Testumgebung bereitstellen.

Mocha, flexible Vielfalt

Während Jasmine im clientseitigen JavaScript weit verbreitet ist, kommt Mocha häufig in serverseitigen Applikationen mit Node.js zum Einsatz. Mocha ist etwas jünger als Jasmine. Sein ­erstes Commit stammt vom August 2011. In der Download­statistik liegt Mocha mit über 2,6 Millionen wöchentlichen Downloads vor Jasmine und auch bei GitHub hat Mocha mehr Sternchen vorzuweisen. Ein Grund dafür könnte sein, dass Mocha flexibler ist. Jasmine hält alles Nötige bereit – Mocha gibt Entwicklern eine wesentlich größere Freiheit. So lässt sich zum ­Beispiel die ­Assertion-Bibliothek austauschen – etwa durch ­Expect oder Chai. Beide Bibliotheken haben eine Syntax, die der von Jasmine ähnelt. Chai bietet jedoch neben der weit­verbreiteten Expect-­Schreibweise noch andere Formulierungen wie should oder assert.

Auch bei den erweiterten Features wie den Test-Doubles lässt sich Mocha mit externen Bibliotheken wie Sinon anwenden. Die ­übrigen Kern-Features wie Test-Suites, Setup- und Teardown-Routinen oder die Unterstützung asynchroner Tests enthält Mocha ebenso wie Jasmine. Auch die Umgebung für Mocha ähnelt der von Jasmine. Auf Node.js lässt sich Mocha nach der ­Installation des Frameworks und der erforderlichen Zusatzpakete direkt ausführen. Um Tests im Browser ­ablaufen zu lassen, können Entwickler auf eine ­Infrastruktur­komponente wie Karma zurückgreifen. Hierfür müssen sie nur den ­Karma-Mocha-Adapter installieren. Alle weiteren Karma-Plugins, wie etwa „Code-­Coverage“, können für beide Frameworks verwendet werden.

Jest, die elegante Lösung

Der jüngste Vertreter der hier genannten JavaScript-Test-­Frameworks ist das von Facebook entwickelte Jest mit einem ­initialen Commit vom Mai 2014. Jest ist auf React-­Anwendungen spezialisiert, lässt sich aber – wie die anderen beiden Frameworks auch – unabhängig von JavaScript-Frameworks und ­-Bibliotheken einsetzen. So können Entwickler damit auch Angular-, Vue- oder Node.js-Applikationen testen. Mit Blick auf die Zahlen liegt der Newcomer klar vorn: Knapp vier Millionen wöchentliche ­Downloads und über 24.000 Sterne bei GitHub sprechen für sich. Einer der Gründe ist, dass die Entwickler aus den Schwächen anderer Frameworks gelernt haben. So ist ein großer Kritikpunkt an Jasmine, dass es die Tests sequenziell ausführt, was bei umfangreichen Anwendungen zu einer relativ langen Laufzeit führt. Jest führt die Tests hingegen parallel aus. Auch bei der Umgebung beschreitet Jest einen anderen Weg. Wo Mocha und ­Jasmine einen Browser zur Ausführung benötigen, nutzt Jest jsdom, das eine Browser-­Umgebung simuliert. Auf diese Weise umgeht Jest das ­Problem, dass das Rendering im Browser die Performance verschlechtert.

Um Tests zu formulieren, können Entwickler die von ­Jasmine und Mocha bekannte Syntax nutzen. Bei Testfunktionen ­können sie neben der it- auch die test-Funktion verwenden. Beide ­unterscheiden sich jedoch in ihrer Funktionsweise nicht. Ein weiterer Vorteil von Jest ist, dass es im einfachsten Fall ganz ohne Konfiguration auskommt. Mit ein paar Handgriffen bietet es aber auch zusätzliche Features wie „Codecoverage“. Eine weitere ­interessante Funktion von Jest ist der sogenannte Snapshot-Test. Dabei zeichnet Jest die Struktur einer UI-Komponente auf und gleicht sie beim nächsten Testdurchlauf ab. Stimmt dabei etwas nicht überein, ist der Test fehlgeschlagen.

Fazit

Konkurrenz belebt bekanntlich das Geschäft und so können sich Entwickler über die Vielfalt der JavaScript-Test-Frameworks freuen. Vor allem, weil sie alle die gleichen Muster anwenden und eine ähnliche Syntax nutzen. Die Wahl hängt damit wohl vom jeweiligen Projekt und den Vorlieben des Entwicklers ab: Jasmine ist das Rundum-sorglos-Paket, mit dem sich die ­meisten ­Probleme auch ohne zusätzliche Komponenten lösen lassen. Mocha bietet zwar mehr Flexibilität, man muss sich aber auch mit den unterschiedlichen Möglichkeiten beschäftigen. Jest schließlich schlägt neue Wege ein und löst die typischsten Probleme beim Testen von Applikationen auf elegante Art.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung