Eine kurze Einführung in JavaScript-Unit-Tests, deren Frameworks und Werkzeuge.
Die Landschaft der Programmierung für die Webentwicklung hat in den vergangenen Jahren eine bemerkenswerte Veränderung erfahren. Konventionelle Programmiersprachen wie Java, .NET und PHP werden zunehmend von JavaScript abgelöst. Dieses Framework hat sich als benutzerfreundlich erwiesen, sowohl im Frontend als auch im Backend und ermöglicht schnelles Prototyping.
Diese Verlagerung hat auch einen Bedarf an leistungsstarken Testwerkzeugen geschaffen. Im Folgenden werden einige der führenden JavaScript-Komponententest-Tools vorgestellt, die aktuell in der Industrie eingesetzt werden.
Die Bedeutung von Unit-Tests
Bevor wir uns den verfügbaren Werkzeugen und deren Vorzügen zuwenden, betrachten wir die grundlegende Bedeutung von Unit-Tests.
Unit-Testing bezeichnet den Prozess des Testens von implementiertem Code auf Modulebene. Mithilfe von Unit-Tests kann überprüft werden, ob entwickelte Module die in den Geschäftsdokumenten definierten Anforderungen erfüllen. Diese Tests werden für jedes Modul direkt während der Entwicklung geschrieben. Nach der Entwicklung eines neuen Moduls wird die gesamte Testsuite durchlaufen, um sicherzustellen, dass keine bestehenden Module durch die neue Entwicklung beeinträchtigt werden.
Die JavaScript-Entwicklung kann ohne die Einhaltung bestimmter Konventionen schnell unübersichtlich werden. Daher ist der Einsatz geeigneter Entwicklungs- und Unit-Testing-Tools unerlässlich. JavaScript-Unit-Tests für das Frontend werden in der Regel in aktuellen Browsern oder Headless-Browsern ausgeführt.
Diese Tests konzentrieren sich auf die Prüfung der Benutzerfreundlichkeit und Reaktionsfähigkeit der Anwendung. Backend-Unit-Testing-Frameworks hingegen prüfen die Geschäftslogik und die Service-Endpunkte für NodeJS-basierten Backend-Code.
MochaJS
MochaJS ist ein weit verbreitetes Testframework, das sowohl Backend- als auch Frontend-Tests unterstützt. Es bietet eine flexible Grundlage für die Entwicklung von Tests nach den individuellen Bedürfnissen. Die Tests werden asynchron auf der Chrome v8-Engine oder in anderen Browsern ausgeführt.
Zu den wichtigsten Vorzügen von Mocha gehören:
- Funktionalität für Frontend- und Backend-Tests
- Unterstützung für NodeJS-Debugger
- Flexible Basis für die Testentwicklung nach Entwicklerpräferenz
- Kompatibilität mit jedem Browser, inklusive Headless-Chrome-Bibliothek
- Unterstützung von Object Mocking für flexible Backend-Tests
Jasmine
Jasmine ermöglicht die Nachbildung von Benutzerinteraktionen, um Testfälle zu generieren, die dem Benutzerverhalten auf einer Website ähneln. Jasmine ist besonders nützlich für die Frontend-Tests hinsichtlich der Sichtbarkeit, Klickbarkeit und der Reaktionsfähigkeit der Benutzeroberfläche in verschiedenen Bildschirmauflösungen. Das Framework erlaubt die Automatisierung von Benutzerinteraktionen mit definierten Verzögerungen und Wartezeiten, um das tatsächliche Benutzerverhalten zu simulieren.
Die Hauptvorteile der Verwendung von Jasmine sind:
- Geringer Overhead aufgrund minimaler externer Abhängigkeiten
- Umfangreiche Tools „out-of-the-box“
- Geeignet für Frontend- und Backend-Tests
- Einfache Codierung, die der natürlichen Sprache ähnelt
- Umfangreiche Dokumentation für die Verwendung mit diversen Frameworks
Entdecken Sie den Online-Kurs über Unit-Tests mit Jasmine.
AVA
AVA ist ein minimalistisches und schlankes Testframework, das die asynchrone Natur von JavaScript nutzt. AVA ermöglicht die parallele Ausführung von Tests.
Es bietet hohe Kontrolle über die Testausführung und konzentriert sich vor allem auf das Testen von NodeJS-basiertem Code. Einige Vorteile sind:
- Schlanker Aufbau für schnelle Ausführung
- Asynchrone und parallele Testausführung
- Höhere Geschwindigkeit im Vergleich zu den meisten anderen Testframeworks
- Einfache Syntax für JavaScript-Tests
- Klarere Stack-Traces für die Fehlersuche
Jest
Jest ist ein bekanntes und von Facebook regelmäßig gewartetes Framework. Es ist eine bevorzugte Wahl für React-basierte Anwendungen, da es keine Konfiguration erfordert.
Die Nutzung ist jedoch nicht auf React beschränkt. Einige Funktionen von Jest sind:
- Ein Framework für NodeJS-, VueJS-, React-, Angular- und andere Babel-basierte Projekte
- Einfacher Einstieg
- Gute Dokumentation und Standard-Codierungssyntax
- Live-Snapshots ermöglichen das Testen mit großen Objekten
Karma
Karma ist eine produktive Testumgebung, die alle gängigen Testbeschreibungs-Frameworks unterstützt. Es bietet die Möglichkeit, Tests in verschiedenen Umgebungen auszuführen. Karma unterstützt das Ausführen von Tests auf verschiedenen Geräten und Anwendungen.
Die Entscheidung für Karma wird vor allem durch die Integration mit CI/CD-Engines und folgende Merkmale motiviert:
- Ausführung von Tests in Browsern, Headless-Umgebungen wie PhantomJS sowie auf Geräten
- Unterstützung von Tests, die in den meisten gängigen Frameworks geschrieben wurden
- Ermöglicht das Ausführen von Tests auf entfernten Geräten durch einfaches Bereitstellen der Dateien
- Unterstützung des Testfall-Debugging mit Chrome und Webstorm
Tape
Tape ähnelt in seiner Architektur AVA. Globale Variablen werden nicht unterstützt, daher muss Tape in jede Testdatei inkludiert werden. Diese Entscheidung, die Verwendung globaler Variablen zu beschränken, hat auch ihre Vorteile. Einige Funktionen sind besonders hervorzuheben:
- Schlanker und effizienter
- Bietet nur „Bare-Metal“-Code, sodass Entwickler volle Freiheit bei der Erstellung von Testfällen haben
- Unterstützung für ES6-, Typescript- und Coffee-Script-Standards
- Unterstützung der Testausführung in den meisten modernen Browsern
Cypress.io
Cypress ist ein interessantes Testframework, das direkt im Browser ausgeführt wird. Es bietet eine interaktive Benutzeroberfläche in Form einer Webseite im Browser und kann einfach auf Mac, Windows und Linux installiert werden. Es handelt sich um einen unabhängigen Test-Runner, der sich nicht eng in den Code integrieren muss.
Puppeteer
Puppeteer ist ein hochwertiges Testausführungs-Framework, das von einem Team bei Google entwickelt wurde. Es bietet eine Headless-Chrome-API für NodeJS-Anwendungen.
Puppeteer wird hauptsächlich für browserspezifische Anwendungen wie Crawl-Tests, Seitenstrukturtests, Screenshots und das Erfassen vorgerenderter Inhalte für Single-Page-Anwendungen eingesetzt. Weitere Vorteile sind:
- Einstellbare Auflösungen und Größen für den Browser
- Unterstützung für das Testen von Chrome-Erweiterungen
- Automatisierung von Formularübermittlungen, UI-Tests und Tastatureingaben
- Unterstützung von ES6-Funktionen wie await und async
ChaiJS
ChaiJS konzentriert sich auf verhaltensgesteuertes Testen und kann mit anderen Frameworks parallel verwendet werden. ChaiJS ist schon länger verfügbar und hat sich mit der Entwicklung der JavaScript-Standards stets weiterentwickelt.
ChaiJS ist kompatibel mit Node, Browser und Rails und verfügt über eine umfangreiche Support-Community und Dokumentation.
QUnit
QUnit ist ein leistungsstarkes Testframework für die Nutzung im Frontend. Es ist die erste Wahl für Entwickler der Bibliotheken JQuery, JQuery Mobile und JQuery UI.
QUnit kann als einzelne JS-Datei geschrieben und auf jeder Webseite ausgeführt werden. Die Standardmethode zum Testen mit QUnit besteht darin, die Datei in eine Webseite einzufügen und Tests mithilfe des QUnit-Plug-ins durchzuführen. Zu den Vorteilen gehören:
- Erstellung wiederverwendbarer Testskripte
- Direkt einsatzbereite Weboberfläche zur visuellen Darstellung von Testausgaben
- Zahlreiche Plugins beschleunigen die Entwicklung von Testfällen
Sinon
Sinon.js ergänzt Unit-Testing-Frameworks durch die Möglichkeit, echte Objekte zu fälschen oder zu „mocken“. Dies ist erforderlich, da beim Testen nicht immer alle erforderlichen Daten verfügbar sind. Es unterstützt die Laufzeitumgebungen Chrome, IE 11, Firefox, Edge, Safari und Node.js.
Eine gute Alternative zu Sinon ist testdouble.js
Fazit
Komponententests sind essenziell, um sicherzustellen, dass Codeänderungen die Anwendung nicht beeinträchtigen und den geschäftlichen Anforderungen entsprechen. Dieser Artikel soll eine Hilfestellung auf diesem Gebiet sein. Für Anfänger könnte der Online-Kurs zum Erlernen von JS-Unit-Tests mit ChaiJS, Sinon und Mocha hilfreich sein.