8 React Testing Library und Utility für Ihr nächstes Entwicklungsprojekt

Veröffentlicht: 2021-06-22

Durch das Testen werden Ihrer Anwendung keine zusätzlichen Funktionen hinzugefügt, aber es gibt Ihnen mehr Vertrauen, Ihre Anwendung an die Produktion zu übergeben.

Ich denke, Sie sind bereits mit dem Testen vertraut, und Sie sind hierher gekommen, um mehr über die Testbibliotheken für Ihre React-Anwendung zu erfahren. Wenn das der Fall ist, dann sind Sie hier genau richtig. Bevor wir uns mit verschiedenen Arten von Bibliotheken befassen, wollen wir kurz sehen, wie sich das Testen auf die Qualität Ihrer Anwendung und die Entwicklungszeit auswirkt.

Testeffekt

Einige von Ihnen haben vielleicht das Gefühl, dass das Schreiben von Tests für die Bewerbung ein zeitaufwändiger Prozess ist. Lassen Sie uns das jetzt überspringen. Nein, es ist keine Zeitverschwendung, die Tests für Ihre Anwendung zu schreiben.

Angenommen, Sie haben eine Anwendung entwickelt, die keine Tests hat. Es verfügt über mehr als 100 Funktionen. Nach einer beträchtlichen Zeit, sagen wir 3 Monate. Ihre Kunden möchten, dass Sie 5 neue Funktionen hinzufügen und 2 Funktionen aus den 100 Funktionen optimieren, die Sie zuvor entwickelt haben.

Sie haben kein Problem damit und haben alle abgeschlossen und Ihren Code an die Produktion gesendet (wie üblich ohne Tests). Nach einigen Tagen kam Ihr Kunde erneut zu Ihnen und sagte, dass die alten Funktionen kaputt gehen. Und Sie haben nicht verstanden, warum? Wieder haben Sie viel Zeit damit verbracht, die Probleme zu lösen. Nachdem Sie die Probleme gelöst hatten, begannen Sie, das Vertrauen zu verlieren.

Wie gewinnt man dieses Vertrauen?

Und sparen Sie sich die zusätzliche Zeit, die Sie für die Lösung der Probleme aufgewendet haben. Eine Sache wird alles richtig machen, dh testen.

Nehmen wir an, Sie haben schriftliche Tests für Ihre Bewerbung. Sie werden erneut Tests durchführen, wenn Sie neue Funktionen entwickelt oder alte Funktionen optimiert haben. In diesem Fall werden Sie sich über die Probleme informieren, bevor Sie zum Produkt selbst gehen. Das spart viel Zeit und gibt Ihnen Vertrauen in die Qualität Ihrer Bewerbung.

Jetzt ist es an der Zeit, sich verschiedene Testbibliotheken für Ihr nächstes React-Projekt anzusehen.

Bibliothek testen

Testing Library ist eine Gruppe von Paketen, die Ihnen beim Testen der UI-Komponenten helfen. Unser Fokus liegt auf der React Testing Libray.

Die React-Testbibliothek ist eine leichtgewichtige Bibliothek mit einem vollständigen Satz von Dienstprogrammen zum Testen von React DOM. Es ermöglicht uns, die Reaktionskomponenten zu testen, ohne die Implementierungsdetails der Bibliothek anzugeben. Es hilft uns, mehr Vertrauen zu gewinnen, indem es das Testen erleichtert.

Meistens funktioniert es zusammen mit der Jest -Testbibliothek. Es bietet einfache Methoden und Dienstprogramme zum Testen und leitet uns an, die Best Practices beim Testen zu befolgen.

Einige der Funktionen der Reaktionstestbibliothek sind:

Es kümmert sich nicht um das Testen des internen Zustands der Komponenten.
Testen des Renderergebnisses der Komponenten.
Testet die DOM-Knoten anstelle der Instanzen der Klassen.
Es bietet eine benutzerdefinierte Möglichkeit, auf die DOM-Elemente in der Bibliothek zuzugreifen.
Stellt sicher, dass die Benutzeroberfläche ordnungsgemäß funktioniert.
Es hat eine große Community-Unterstützung.

Scherz

Jest ist ein Testframework zum Testen von JavaScript- und TypeScript-Code. Und es lässt sich gut in die Front-End-Bibliotheken integrieren. Es wird von Facebook entwickelt und gepflegt. Das React-Team empfiehlt es zum Testen der React-Anwendung.

Es hat die meisten Downloads als alle anderen Testbibliotheken. Jest wird zusammen mit der React-Testbibliothek leistungsfähiger für React-Tests sein. Und die meisten Entwickler da draußen verwenden diese Kombination für ihre Tests.

Einige der Merkmale des Jest sind:

Tests sind voneinander isoliert.
Es bietet Codeabdeckung.
Es ist schnell.
Es bietet eine Möglichkeit, die Funktionen zu simulieren.
Es bietet verschiedene Arten von Ausnahmen für das Testen.

Enzym

Das Enzym ist ein Testdienstprogramm zum Testen von React-Komponenten. Es ermöglicht uns, die gerenderte Ausgabe der React-Komponente zu durchlaufen und einfach zu manipulieren. Es wurde von Airbnb erstellt.

Es muss mit den anderen Testläufern wie Jest, Mokka, Jasmin usw. zum Testen von React-Komponenten verwendet werden. Es bietet zusätzliche und einfache Möglichkeiten zum Rendern und Testen der React-Komponenten. Und es funktioniert nur mit der React-Bibliothek.

Mokka

Mocha ist ein Testframework, das das Testen einfach macht. Es läuft auf NodeJS. Sein Test Runner arbeitet mit anderen Testbibliotheken für React-Tests zusammen.

Einige der Merkmale des Mocha sind:

Stellt Testabdeckungsberichte bereit.
Vollständig konfigurierbar mit der Konfigurationsdatei.
Async-Test-Timeout-Unterstützung.
Timeouts basierend auf den Tests.
Es hebt sogar die langsamen Tests für Sie hervor.

Mocha hat viele andere Funktionen, die auf seiner Homepage auf Sie warten.

Karma

Karma ist eine Testumgebung für Ihre Anwendung. Es ermöglicht uns, die Tests auf echten Browsern und Geräten (Handys, Tablets und Desktops) durchzuführen. Es zielt darauf ab, den Entwicklern verschiedene Umgebungen zum Testen bereitzustellen.

Einige der Merkmale 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 in andere Testframeworks wie Mocha , Jasmine usw. integrieren.
Debugging leicht gemacht mit der IDE.

Jasmin

Jasmine ist ein Testframework für verhaltensgesteuerte Entwicklung (BDD) für JavaScript. Zum Testen des Codes ist kein DOM erforderlich. Jasmine ist für das Testen von NodeJS-Code konzipiert. Wir können React mit Jasmine und anderen Testbibliotheken testen.

Einige der Eigenschaften von Jasmine sind:

Es hat eine saubere und einfache Syntax zum Schreiben von Tests.
Wir können Tests sowohl für das Frontend als auch für das Backend schreiben.
Der Kern von Jasmin hat keine Abhängigkeiten, was ihn schnell macht.

Tschai

Chaii ist eine Assertion-Bibliothek. Es kann mit jeder anderen JavaScript-Testbibliothek gekoppelt werden. Chai bietet Funktionalitäten wie should , assert und except for theassertion.

Zypresse

Cypress ist das End-to-End-Testframework für JavaScript. Es ermöglicht uns, Tests im Browser einzurichten, zu schreiben, auszuführen und zu 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 tatsächlichen Browserumgebung durch, die Ihnen auch Zugriff auf die Entwicklungstools gibt. Es wird verwendet, um den End-to-End-Fluss einer Funktion in der Anwendung zu testen.

Einige der Merkmale der Zypresse sind:

Sie können die Momentaufnahme jedes Schritts sehen. Es macht Schnappschüsse von jedem Schritt, während die Tests ausgeführt werden.
Es hat das Debuggen mit DevTools einfach gemacht.
Cypress führt die Tests automatisch erneut aus, wenn Sie Änderungen an den Tests vornehmen, ähnlich wie bei der React-Echtzeitfunktion.
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 Bewerbung. Es erleichtert die Dinge in schweren Zeiten. Machen Sie keine Entschuldigung darin. Die Reihenfolge der Testbibliotheken in den Artikeln spielt keine Rolle. Es ist nur für die Zählung. Keine Bibliothek ist niedriger als andere. Jede Bibliothek hat ihre eigenen Vor- und Nachteile.

Wir können die vollständigen Funktionen der React-Anwendung größtenteils mit der React Testing Library und Jest testen. Und es wird von den meisten Mitgliedern der React-Community empfohlen. Es ist nicht zwingend erforderlich, dass Sie diese beiden verwenden. Wenn Sie ein Anfänger sind, können Sie es versuchen. Wenn Sie nach etwas Spezifischerem für Ihre React-Anwendung suchen, gehen Sie jede Bibliothek durch.

Viel Spaß beim Testen