Das Testen fügt Ihrer Anwendung keine zusätzlichen Funktionen hinzu, aber es gibt Ihnen mehr Vertrauen, um Ihre Anwendung in die Produktion zu überführen.
Ich denke, Sie sind bereits mit dem Testen vertraut und sind hierher gekommen, um sich über die Testbibliotheken für Ihre React-Anwendung zu informieren. Wenn das der Fall ist, dann sind Sie hier genau richtig. Bevor wir uns mit den verschiedenen Arten von Bibliotheken befassen, lassen Sie uns kurz sehen, wie sich das Testen auf die Qualität Ihrer Anwendung und die Entwicklungszeit auswirkt.
Auswirkung von Tests
Einige von Ihnen haben vielleicht das Gefühl, dass das Schreiben von Tests für die Anwendung sehr viel Zeit in Anspruch nimmt. Lassen wir das erst einmal beiseite. Nein, es ist keine Zeitverschwendung, die Tests für Ihre Anwendung zu schreiben.
Nehmen wir an, Sie haben eine Anwendung entwickelt, für die es keine Tests gibt. Sie verfügt über mehr als 100 Funktionen. Nach einer beträchtlichen Zeitspanne, sagen wir 3 Monaten. Ihre Kunden möchten, dass Sie 5 neue Funktionen hinzufügen und 2 Funktionen der 100 Funktionen, die Sie zuvor entwickelt haben, optimieren.
Sie haben kein Problem damit und haben alle Funktionen fertiggestellt und Ihren Code an die Produktion übergeben (wie üblich ohne Tests).
Nach einigen Tagen kam Ihr Kunde wieder zu Ihnen und sagte, dass die alten Funktionen nicht mehr funktionieren. Und Sie haben nicht verstanden, warum? Wieder verbrachten Sie viel Zeit damit, die Probleme zu beheben. Nachdem Sie die Probleme gelöst hatten, begannen Sie das Vertrauen zu verlieren.
Wie können Sie dieses Vertrauen zurückgewinnen?
Und sparen Sie die zusätzliche Zeit, die Sie für die Lösung der Probleme aufgewendet haben. Eine Sache macht alles richtig, nämlich das Testen.
Nehmen wir an, Sie haben Tests für Ihre Anwendung geschrieben. Sie werden die Tests erneut durchführen, wenn Sie neue Funktionen entwickelt oder alte Funktionen verbessert haben. In diesem Fall erfahren Sie von den Problemen, bevor Sie das eigentliche Produkt in Angriff nehmen. Das spart eine Menge Zeit und gibt Ihnen Vertrauen in die Qualität Ihrer Anwendung.
Jetzt ist es an der Zeit, sich verschiedene Testbibliotheken für Ihr nächstes React-Projekt anzusehen.
Test-Bibliothek
Testing Library ist eine Gruppe von Paketen, die Ihnen beim Testen der UI-Komponenten helfen. Unser Schwerpunkt liegt auf der React Testing Libray.
Die React Testing Library ist eine leichtgewichtige Bibliothek mit einem vollständigen Satz von Dienstprogrammen für das Testen von React DOM. Sie ermöglicht es uns, die React-Komponenten zu testen, ohne die Implementierungsdetails der Bibliothek preiszugeben. Sie hilft uns, mehr Vertrauen zu gewinnen, indem sie das Testen einfacher macht.
Meistens arbeitet es zusammen mit der Jest Testbibliothek. Sie bietet einfache Methoden und Dienstprogramme für das Testen und leitet uns an, die besten Praktiken beim Testen zu befolgen.
Einige der Funktionen der React Testing Library sind:
- Sie kümmert sich nicht um das Testen des internen Zustands der Komponenten.
- Sie testet das Rendering-Ergebnis der Komponenten.
- Sie testet die DOM-Knoten anstelle der Instanzen der Klassen.
- Sie bietet einen benutzerdefinierten Weg zum Zugriff auf die DOM-Elemente in der Bibliothek.
- Stellt sicher, dass die Benutzeroberfläche ordnungsgemäß funktioniert.
- Es wird von einer großen Gemeinschaft unterstützt.
Jest
Jest ist ein Test-Framework zum Testen von JavaScript- und TypeScript-Code. Und es lässt sich gut in die Frontend-Bibliotheken integrieren. Es wird von Facebook entwickelt und gepflegt. Das React-Team empfiehlt es für das Testen von React-Anwendungen.
Es hat die meisten Downloads im Vergleich zu allen anderen Testbibliotheken. Jest wird zusammen mit der React-Testing-Bibliothek leistungsfähiger für das Testen von React sein. Und die meisten Entwickler da draußen verwenden diese Kombination für ihre Tests.
Einige der Funktionen von Jest sind:
- Die Tests sind voneinander isoliert.
- Es bietet Codeabdeckung.
- Es ist schnell.
- Es bietet eine Möglichkeit, die Funktionen zu spiegeln.
- Es bietet verschiedene Arten von Ausnahmen zum Testen.
Enzyme
Enzyme ist ein Testwerkzeug für das Testen von React-Komponenten. Es ermöglicht es uns, die gerenderte Ausgabe der React-Komponente zu durchlaufen und einfach zu manipulieren. Es wurde von Airbnb entwickelt.
Es muss zusammen mit den anderen Testläufern wie jest, mocha, jasmine usw. für das Testen von React-Komponenten verwendet werden. Es bietet zusätzliche und einfache Möglichkeiten zum Rendern und Testen von React-Komponenten. Und es funktioniert nur mit der React-Bibliothek.
Mocha
Mocha ist ein Test-Framework, das das Testen vereinfacht. Es läuft auf NodeJS. Sein Test-Runner funktioniert zusammen mit anderen Testbibliotheken für React-Tests.
Einige der Funktionen von Mocha sind:
- Liefert Berichte zur Testabdeckung.
- Vollständig konfigurierbar über die Konfigurationsdatei.
- Unterstützung für asynchrone Testzeitüberschreitungen.
- Zeitüberschreitungen basierend auf den Tests.
- Es hebt sogar die langsamen Tests für Sie hervor.
Mocha hält auf seiner Homepage noch viele weitere Funktionen für Sie bereit.
Karma
Karma ist eine Testumgebung für Ihre Anwendung. Sie ermöglicht es uns, Tests auf echten Browsern und Geräten (Handys, Tablets und Desktops) durchzuführen. Es zielt darauf ab, den Entwicklern verschiedene Umgebungen zum Testen zur Verfügung zu stellen.
Einige der Funktionen von Karma sind:
- Testen Sie Ihren Code auf echten Geräten.
- Es ermöglicht uns, unseren Code in einer Headless-Umgebung wie PhantomJS zu testen.
- Sie können Karma mit CI/CD-Tools wie Jenkins, Travis und Semaphore integrieren.
- Sie können es problemlos mit anderen Test-Frameworks wie Mocha, Jasmine usw. integrieren,
- Debugging wird mit der IDE leicht gemacht.
Jasmine
Jasmine ist ein Test-Framework für die verhaltensgesteuerte Entwicklung (BDD) für JavaScript. Es benötigt kein DOM zum Testen des Codes. Jasmine ist für das Testen von NodeJS-Code konzipiert. Wir können React mit Jasmine und anderen Testbibliotheken testen.
Einige der Funktionen von Jasmine sind:
- Es hat eine saubere und einfache Syntax für das Schreiben von Tests.
- Wir können Tests sowohl für das Front-End als auch für das Back-End schreiben.
- Der Kern von Jasmine hat keine Abhängigkeiten, was es schnell macht.
Chai
Chai ist eine Assertion-Bibliothek. Sie kann mit jeder anderen JavaScript-Testbibliothek gepaart werden. Chai bietet Funktionalitäten wie should, assert und except for assertion.
Cypress
Cypress ist das JavaScript-End-to-End-Testing-Framework. Mit ihm können wir Tests im Browser einrichten, schreiben, ausführen und debuggen. Es verfügt über ein Dashboard, das Ihnen einen detaillierten Bericht über den Status jedes von Ihnen geschriebenen Tests liefert.
Cypress führt den Test in einer echten Browser-Umgebung aus, über die Sie auch Zugriff auf die Entwicklungswerkzeuge haben. Es wird verwendet, um den End-to-End-Flow einer Funktion in der Anwendung zu testen.
Einige der Funktionen von Cypress sind:
- Sie können den Snapshot jedes Schritts sehen. Während der Ausführung der Tests werden Schnappschüsse von jedem Schritt gemacht.
- Es erleichtert das Debugging mit DevTools.
- Cypress führt die Tests automatisch erneut aus, wenn Sie Änderungen an den Tests vornehmen, ähnlich wie bei der Echtzeitfunktion von React.
- Die Tests warten automatisch auf die Ausgabe, ohne die await-Anweisung zu verwenden.
Fazit
Das Schreiben von Tests ist gut für Sie und die Anwendung. Es macht die Dinge in schwierigen Zeiten einfach. Machen Sie keine Ausrede daraus. Die Reihenfolge der Testbibliotheken in den Artikeln hat keine Bedeutung. Sie dient nur der Übersicht. Keine Bibliothek ist schlechter als andere. Jede Bibliothek hat ihre eigenen Vor- und Nachteile.
Meistens können wir alle Funktionen der React-Anwendung mit der React Testing Library und Jest testen. Und sie wird von den meisten Mitgliedern der React-Community empfohlen. Es ist nicht zwingend erforderlich, dass Sie diese beiden Tools verwenden. Wenn Sie ein Anfänger sind, können Sie sie ausprobieren. Wenn Sie etwas Spezielleres für Ihre React-Anwendung suchen, sollten Sie sich die einzelnen Bibliotheken ansehen.
Viel Spaß beim Testen 🙂