Share
Was Sie erstellen werdenDas Testen von Code ist für viele Entwickler eine verwirrende Praxis. Das ist verständlich, denn das Schreiben von Tests erfordert mehr Aufwand, Zeit und die Möglichkeit, mögliche Anwendungsfälle vorherzusehen. Startups und Entwickler, die an kleineren Projekten arbeiten, ziehen es in der Regel vor, Tests insgesamt zu ignorieren, da Ressourcen und Personal fehlen.
Es gibt jedoch einige Gründe, warum ich glaube, dass Sie Ihre Komponenten testen sollten:
Reaktion ist auch nicht anders. Wenn Ihre gesamte Anwendung zu einem Haufen schwer zu wartender Komponenten wird, bietet das Testen Stabilität und Konsistenz. Das Schreiben von Tests vom ersten Tag an hilft Ihnen, besseren Code zu schreiben, auf einfache Weise Fehler zu finden und einen besseren Entwicklungsworkflow zu gewährleisten.
In diesem Artikel werde ich Sie durch alles führen, was Sie wissen müssen, um Tests für Ihre React-Komponenten zu schreiben. Ich werde auch einige der besten Praktiken und Techniken behandeln, während wir dabei sind. Lass uns anfangen!
Testen ist der Prozess der Überprüfung unserer test assertions sind wahr und sie bleiben während der gesamten Lebensdauer der Anwendung erhalten. Eine Testassertion ist ein boolescher Ausdruck, der true zurückgibt, es sei denn, in Ihrem Code liegt ein Fehler vor.
Eine Behauptung könnte zum Beispiel so einfach sein: "Wenn der Benutzer zu navigiert /Anmeldung, ein modal mit der id #Anmeldung sollte gerendert werden. "Wenn sich herausstellt, dass Sie die Anmeldekomponente irgendwie durcheinander gebracht haben, würde die Assertion false zurückgeben. Assertions beschränken sich nicht nur auf das, was gerendert wird. Sie können auch Assertions machen, wie die Anwendung auf Benutzerinteraktionen reagiert andere Aktionen.
Es gibt viele automatisierte Teststrategien, mit denen Front-End-Entwickler ihren Code testen. Wir beschränken uns auf nur drei Software-Test-Paradigmen, die bei React beliebt sind: Unit-Tests, Funktionstests und Integrationstests.
Unit-Tests sind einer der Test-Veteranen, die in Testkreisen immer noch beliebt sind. Wie der Name vermuten lässt, werden Sie einzelne Codeteile testen, um sicherzustellen, dass sie wie erwartet unabhängig funktionieren. Aufgrund der Komponentenarchitektur von React eignen sich Komponententests ganz natürlich. Sie sind auch schneller, weil Sie sich nicht auf einen Browser verlassen müssen.
Unit-Tests helfen Ihnen, die einzelnen Komponenten isoliert zu betrachten und sie als Funktionen zu behandeln. Ihre Komponententests für eine bestimmte Komponente sollten die folgenden Fragen beantworten:
Funktionstests werden verwendet, um das Verhalten eines Teils Ihrer Anwendung zu testen. Funktionstests werden normalerweise aus Sicht des Benutzers geschrieben. Eine Funktion ist normalerweise nicht auf eine einzelne Komponente beschränkt. Es kann sich um ein voll ausgefülltes Formular oder um eine ganze Seite handeln.
Wenn Sie beispielsweise ein Anmeldeformular erstellen, kann dies Komponenten für die Formularelemente, Warnungen und ggf. Fehler umfassen. Die Komponente, die nach dem Senden des Formulars gerendert wird, ist auch Teil dieser Funktionalität. Dies erfordert keinen Browser-Renderer, da für unsere Tests ein virtuelles In-Memory-DOM verwendet wird.
Integrationstests sind eine Teststrategie, bei der alle Einzelkomponenten als Gruppe getestet werden. Integrierte Tests versuchen, die Benutzererfahrung zu replizieren, indem die Tests in einem tatsächlichen Browser ausgeführt werden. Dies ist erheblich langsamer als Funktionstests und Komponententests, da jede Testsuite in einem Live-Browser ausgeführt wird.
In React sind Komponententests und Funktionstests beliebter als Integrationstests, da sie einfacher zu schreiben und zu warten sind. Das werden wir in diesem Tutorial behandeln.
Sie benötigen bestimmte Werkzeuge und Abhängigkeiten, um mit der Reakt-Anwendung Unit- und Funktionstests zu beginnen. Ich habe sie unten aufgelistet.
Jest ist ein Test-Framework, das keine Konfiguration erfordert und daher einfach einzurichten ist. Es ist beliebter als Test-Frameworks wie Jasmine und Mocha, weil es von Facebook entwickelt wurde. Jest ist auch schneller als der Rest, weil es eine clevere Technik zur Parallelisierung von Testläufen zwischen Arbeitern verwendet. Abgesehen davon wird jeder Test in einer Sandbox-Umgebung ausgeführt, um Konflikte zwischen zwei aufeinander folgenden Tests zu vermeiden.
Wenn Sie die Create-React-App verwenden, wird sie mit Jest ausgeliefert. Wenn nicht, müssen Sie möglicherweise Jest und einige andere Abhängigkeiten installieren. Sie können mehr darüber auf der offiziellen Jest-Dokumentationsseite nachlesen.
Selbst wenn Sie create -react-app verwenden, müssen Sie dieses Paket installieren, um Momentaufnahmen zu rendern. Snapshot-Tests sind Teil der Jest-Bibliothek. Anstatt die Benutzeroberfläche der gesamten Anwendung zu rendern, können Sie den Testrenderer verwenden, um schnell eine serialisierbare HTML-Ausgabe aus dem virtuellen DOM zu generieren. Sie können es wie folgt installieren:
Garn hinzufügen Reakt-Test-Renderer
Reakt-Dom / Test-Dienstprogramme besteht aus einigen Test-Dienstprogrammen, die vom React-Team bereitgestellt werden. Alternativ können Sie das von Airbnb freigegebene Enzyme-Paket verwenden. Enzym ist viel besser als ReactTestUtils, da es einfach ist, die Ausgabe Ihrer React Components zu aktivieren, zu manipulieren und durchzugehen. Wir werden unsere Tests mit React utils beginnen und später zu Enzyme wechseln.
Führen Sie den folgenden Befehl aus, um Enzyme zu installieren.
Garn hinzufügen Enzym Enzym-Adapter-Reakt-16
Fügen Sie den Code hinzu src / SetupTests.js.
importiere configure von 'enzym'; Adapter aus 'Enzym-Adapter-Reakt-16' importieren; configure (adapter: neuer Adapter ());
Weitere Informationen hierzu finden Sie im Abschnitt Testkomponenten der Seite Create-React-App.
Wir werden Tests für eine einfache Demoanwendung schreiben, die eine Master- / Detailansicht einer Produktliste anzeigt. Sie finden die Demo-Anwendung in unserem GitHub-Repo. Die Anwendung besteht aus einer Container-Komponente, die als bekannt ist Produktcontainer und drei Präsentationskomponenten: Produktliste, Produktdetails, und ProductHeader.
. ├── package-lock.json ├── package.json ├── public │ index.html └── └── manifest.json ├── src ├── ├── Komponenten ├── ├── ├── App.js ├── Cont ProductContainer.js ├── D ProductDetails.jsx ├── ├── H ProductHeader.js ├── L ProductList.jsx ├── index.js └──. Style.css
Diese Demo ist ein guter Kandidat für Unit-Tests und Funktionstests. Sie können jede Komponente einzeln testen und / oder die Produktlistungsfunktion als Ganzes testen.
Nachdem Sie die Demo heruntergeladen haben, erstellen Sie ein Verzeichnis mit dem Namen __tests__Innerhalb / src / components /. Sie können dann alle Testdateien speichern, die sich auf diese Funktionalität beziehen __tests__ Verzeichnis. Tester nennen ihre Testdateien normalerweise als beides .spec.js oder .test.js-zum Beispiel, ProductHeader.test.js oder ProductHeader.spec.js.
Ein ... kreieren ProductHeader.test.js Datei, wenn Sie nicht bereits So werden unsere Tests grundsätzlich aussehen:
Accentsconagua
beschreiben ('ProductHeader', () => it ('bestanden test', () => expect (true) .toBeTruthy ();) it ('Failing test', () => expect (false)) .toBeTruthy ();))Die Testsuite beginnt mit einem beschreiben block, eine globale Jest-Funktion, die zwei Parameter akzeptiert. Der erste Parameter ist der Titel der Testsuite und der zweite Parameter ist die tatsächliche Implementierung. Jeder es() in einer Testsuite entspricht ein Test oder eine Spezifikation. Ein Test enthält eine oder mehrere Erwartungen, die den Status des Codes überprüfen.
erwartet (true) .toBeTruthy ();
In Jest ist eine Erwartung eine Behauptung, die entweder wahr oder falsch zurückgibt. Wenn alle Zusicherungen in einer Spezifikation wahr sind, gilt dies als bestanden. Ansonsten soll der Test fehlschlagen.
Zum Beispiel haben wir zwei Testspezifikationen erstellt. Der erste sollte offensichtlich bestehen und der zweite sollte versagen.
Hinweis: toBeTruthy () ist ein vordefinierter Matcher. In Jest nimmt jeder Matcher einen Vergleich zwischen dem erwarteten und dem tatsächlichen Wert vor und gibt einen booleschen Wert zurück. Es gibt viele weitere Matcher, die wir uns gleich ansehen werden.
Create-React-App hat alles eingerichtet, was Sie zur Ausführung der Testsuite benötigen. Sie müssen nur den folgenden Befehl ausführen:
Garntest
Sie sollten so etwas sehen:
Um den fehlerhaften Test zu bestehen, müssen Sie das ersetzen toBeTruthy () Matcher mit toBeFalsy ().
erwartet (false) .toBeFalsy ();
Das ist es!
Wie bereits erwähnt, verwendet Jest Matcher, um Werte zu vergleichen. Sie können damit Gleichheit prüfen, zwei Zahlen oder Strings vergleichen und die Wahrhaftigkeit von Ausdrücken überprüfen. Hier ist die Liste der beliebten Matchers in Jest.
sein();toBeNull ()zu definieren()toBeUndefined ()toBeTruthy ()toBeFalsy ()toBeGreaterThan ()toBeLesserThan ()passen()enthalten()Das ist nur ein Vorgeschmack. Sie finden alle verfügbaren Matcher in den Referenzdokumenten.
Zuerst schreiben wir ein paar Tests für die ProductHeader Komponente. Öffne die Datei ProductHeader.js wenn du noch nicht.
importieren Sie React, Component aus 'reagieren'; Die Klasse ProductHeader erweitert die Komponente render () return (Produktauflistungsseite
); ; Standard-ProduktHeader exportieren;
Möchten Sie wissen, warum ich hier eine Klassenkomponente anstelle einer funktionalen Komponente verwendet habe? Der Grund ist, dass es schwieriger ist, funktionale Komponenten mit ReactTestUtils zu testen. Wenn Sie wissen möchten, warum das so ist, hat diese Stack Overflow-Diskussion die Antwort.
Wir könnten einen Test mit den folgenden Annahmen schreiben:
h2 Etikett.h2 Tag sollte eine Klasse haben Titel.Um eine Komponente zu rendern und relevante DOM-Knoten abzurufen, benötigen wir ReactTestUtils. Entfernen Sie die Dummy-Angaben und fügen Sie den folgenden Code hinzu:
import Reagieren von 'Reagieren'; ReactTestUtils aus 'Reakt-Dom / Test-Utils' importieren; Produktliste importieren aus '… / Produktliste'; beschreiben ('ProductHeader Component', () => it ('hat ein h2-Tag', () => // Testen Sie hier); es ('ist in eine Titelklasse eingeschlossen', () => / / Hier testen))Um zu prüfen, ob ein h2 Knoten, müssen wir zuerst unsere React-Elemente in einen DOM-Knoten im Dokument umwandeln. Sie können dies mit Hilfe einiger APIs tun, die von exportiert werden ReactTestUtils. Zum Beispiel, um unsere zu machen
const Komponente = ReactTestUtils.renderIntoDocument ();
Dann können Sie das extrahieren h2 Tag aus der Komponente mit Hilfe von findRenderedDOMComponentWithTag ('Tag-Name'). Es prüft alle untergeordneten Knoten und findet den Knoten, der dem entspricht Verlinke den Namen.
Hier ist die ganze Testspezifikation.
it ('hat ein h2-Tag'), () => const component = ReactTestUtils.renderIntoDocument (Versuchen Sie es zu speichern und Ihr Testläufer sollte Ihnen zeigen, dass der Test bestanden hat. Das ist etwas überraschend, weil wir keine haben erwarten von() Aussage wie in unserem vorherigen Beispiel. Die meisten der von exportierten Methoden ReactTestUtils haben Erwartungen in sie eingebaut. In diesem speziellen Fall, wenn das Test-Dienstprogramm das nicht findet h2 Wenn das Tag markiert ist, wird ein Fehler ausgegeben und die Tests schlagen automatisch fehl.
Versuchen Sie jetzt, den Code für den zweiten Test zu erstellen. Sie können verwenden findRenderedDOMcomponentWithClass () um zu überprüfen, ob es einen Knoten mit der Klasse "title" gibt.
it ('hat eine Titelklasse'), () => const component = ReactTestUtils.renderIntoDocument (Das ist es! Wenn alles gut geht, sollten Sie die Ergebnisse grün sehen.
Obwohl wir nur zwei Testspezifikationen verfasst haben, haben wir dabei eine Menge Grundlegendes hinterlegt. Im nächsten Artikel werden wir einige ausführliche Tests für unsere Produktlistungsseite schreiben. Wir werden auch ReactTestUtils durch Enzym ersetzen. Warum? Enzyme bietet eine hochentwickelte Schnittstelle, die sehr einfach zu bedienen und für Entwickler geeignet ist. Bleiben Sie dran für den zweiten Teil!
Wenn Sie sich irgendwo festgefahren fühlen oder Hilfe benötigen, teilen Sie uns dies in den Kommentaren mit.
