Wenn Sie wissen möchten, wie man reagieren soll, sind Sie an der richtigen Stelle. Kennst du wirklich, dass dein Code das tut, was es tun soll? Hast du es im Browser getestet? Was ist, wenn Sie nicht, oder Sie können nicht alles testen, und es bricht in der Produktion?
Eine Testbibliothek ist eine Gruppe von Utilities-Entwicklern, um einzelne Tests auf Anwendungskomponenten zu schreiben. Einige der Hauptteile eines Tests sind:
Beschreibung:
beschreibt, was der Test geht
Verwenden / Render:
verwendet die Komponente in einer Umgebung, in der er getestet werden kann
Verspottung:
Erstellt Talend-Funktionen, damit Sie Ihre Annahmen überprüfen können
Im Laufe dieses Artikels werde ich einige Beispiele aus der React-Testing-Bibliothek erkunden, um Ihnen zu helfen, mit dieser wertvollen Möglichkeit zu beginnen, die Robustheit Ihrer Code-Ausgabe zu verbessern und sicherzustellen, dass Ihr Code nicht wirft alle bösen Überraschungen, sobald es in die Produktion geht.
Willst du nützliche Ressourcen? Hier ist ein Ablauf der Besten
Webdesign-Tools.
Um dabei helfen wir Ihnen, intelligenter zu arbeiten. Oder wenn Sie eine neue Maschine benötigen, versuchen Sie diese Rundung der
Beste Laptops zur Programmierung
. Oder wenn Sie einen neuen Standort bauen, benötigen Sie möglicherweise einen tollen
Webseitenersteller
.
01. Erste Schritte mit der Reaktionsprüfungsbibliothek
Ich werde Create-React-App für diese Demo verwenden, da es bereits mit der Testbibliothek vorkonfiguriert ist. Wenn Sie GATSBY oder ein benutzerdefiniertes Setup verwenden, ist möglicherweise eine Konfiguration vorhanden, die Sie durchführen müssen, bevor Sie mit der Testbibliothek verwenden.
Um zu beginnen, erstellen wir eine neue App. Wenn Sie bereits eine aktuelle Version von Node.js haben, können Sie den folgenden Befehl ausführen, ohne dass alles andere global installiert wird:
npx create-react-app netmag-javascript-testing
02. Entscheiden Sie, was testen soll
Stellen Sie sich vor, wir haben eine einfache Komponente, sagen Sie einen Knopf mit einem bestimmten Zustand. Was sind einige der Dinge, die in einer solchen Komponente testen müssen?
●
Das Erscheinungsbild der Komponente:
Wir möchten nicht, dass sich nichts Unerwartetes ändert, nachdem wir unsere Komponente geschrieben haben. Wir werden also einen Snapshot-Test schreiben, um zu erfassen, wie es ertippt. Wenn ändert, sehen wir es dann schnell, ohne einen manuellen oder visuellen Test. Dies ist großartig für Komponenten, die aus vielen kleineren Komponenten bestehen: Sie können schnell sehen, wann (und wo) sein Erscheinungsbild beeinträchtigt wurde.
●
Die verschiedenen Zweige, die rendern:
Da wir zwei oder mehr verschiedene Ausgänge haben könnten, müssen wir es testen, dass sie alle korrekt rendern, nicht nur eines von ihnen. Wir müssen also ein Click-Ereignis simulieren und haben einen weiteren Snapshot-Test für die Art und Weise, wie sie, nachdem dieser Rechenzweig ausgeführt wurde, ausgeführt wurde.
●
Diese Funktionen werden wie erwartet angerufen:
Wir möchten sicherstellen, dass der Code, den wir geschrieben haben, um eine andere Funktion aufzurufen, wie wir davon ausgehen, dass es davon ausgeht. Da diese Funktion jedoch eine externe Abhängigkeit ist, wollen wir das hier nicht testen. Unsere Tests sollten nur die Funktionalität einkapseln, die wir möchten.
Schreiben wir unseren ersten Test. Erstellen Sie eine neue Datei angerufen
Mycomponent.unit.test.js.
in demselben Ordner wie die Komponente. Durch das Hinzufügen von Test.js am Ende wird es automatisch von der Testbibliothek ausgewählt. Der Inhalt dieser Datei liegt unten:
Import reagieren von 'reagieren'
Import {Render} von '@ testing-bibliothek / reagieren'
Mycomponent von './mycomponent' importieren
beschreiben ('das & lt; Mycomponent / & gt;, () = & gt; {
// Tests gehen hier
})
Das erste, was ich aufmerksam machen möchte, ist das
beschreiben()
Funktion, die zwei Argumente nimmt: Der erste ist eine Zeichenfolge, mit der Sie besser beschreiben können - als Textzeichenfolge - wie Ihr Test tut. In unserem Fall haben wir einfach gesagt, dass es rendern sollte. Dies ist sehr nützlich, wenn jemand anderes Ihren Code ansieht, oder Sie müssen sich daran erinnern, was Sie zu einem späteren Zeitpunkt getan haben. Das Schreiben von gutem Beschreibungsaussagen ist eine Form der Codedokumentation und einen weiteren guten Grund für das Schreiben von Tests.
Das zweite Argument ist Ihre Tests. Das
beschreiben()
Die Funktion leitet alle diese Tests nacheinander aus.
04. Verwenden Sie die Bereinigungsfunktion
Lassen Sie uns eine Helferfunktion einführen.
Käufe ()
. Wir müssen dies verwenden, weil wir jedes Mal mit der Komponente etwas tun, wir möchten, dass eine frische Kopie ohne die Requisiten, ohne die wir zuvor weitergegeben hatten, noch in der Komponente bestanden hatten. Oder wir müssen möglicherweise die Komponente erneut übertragen:
Käufe ()
Tut das für uns und wir können es die Bereinigungsfunktion weitergeben.
Dieser Render gibt uns Zugriff auf alle gerenderten Eigenschaften der kompilierten Komponente. Es könnte gut sein, dies in ein einzustellen
console.log ()
So können Sie klarer sehen, was es tut.
Wenn Sie dies tun, werden Sie sehen, dass es einige nützliche Eigenschaften gibt, die wir hier nutzen können. Ich werde eine Assertion erstellen (eine überprüfbare Erklärung stellen) und testen Sie es, indem Sie den Container extrahieren. Der Container 'enthält' die DOM-Knoten (alle HTML), die der Komponente zugeordnet sind.
Jetzt haben wir Zugang zum Container, wie sage ich, dass es nach meiner Behauptung gerendert wird? Indem Sie einen Snapshot-Test hinzufügen.
Denken Sie an einen Schnappschuss, der wie ein Foto ist. Es dauert zu einem bestimmten Zeitpunkt eine Momentaufnahme unserer Komponente. Wenn wir dann Änderungen an dem Code vornehmen, können wir sehen, ob es noch mit dem ursprünglichen Snapshot entspricht. Wenn dies der Fall ist, können wir zuversichtlich sein, dass sich in der Komponente nichts geändert hat. Wenn dies nicht der Fall ist, haben wir jedoch möglicherweise ein Problem entdeckt, das in einer anderen Komponente entstand, einer, die wir bisher nicht entdeckt haben:
06. Testeigenschaften
Requisiten oder Eigenschaften einer Komponente können auch mit Momentaufnahmen getestet werden. Testen Die verschiedenen Requisiten, die Sie Ihrer Komponente anbieten, geben Ihnen eine größere Abdeckung und Ihr Vertrauen. Sie wissen nie, wann eine Anforderung bedeutet, dass die Requisiten der Komponenten refaktiert sind und der endgültige Ausgang ändert sich.
Fügen Sie der Spitze Ihrer Datei das folgende Objekt hinzu:
Wir definieren die Eigenschaften in einem Objekt und verwenden dann den Spread-Operator (drei Punkte, gefolgt vom Objektnamen:
... LightProperties)
Weil wir nur ein Argument geben können, wenn wir auf diese Weise rendern. Es ist auch nützlich, um zu sehen, welche Eigenschaften Sie isoliert durchführen:
Stellen Sie sich vor, unsere Komponente hat eine Schaltfläche, und Sie möchten sicherstellen, dass etwas passiert, wenn Sie auf die Schaltfläche klicken. Sie denken vielleicht, dass Sie den Zustand der Anwendung testen möchten. Sie könnten zum Beispiel versucht sein, zu testen, dass der Status aktualisiert hat. Das ist jedoch nicht das Objekt dieser Tests.
Dies führt uns ein wichtiges Konzept in der Verwendung einer Testbibliothek: Wir sind nicht hier, um den Zustand oder die Art und Weise, wie unsere Komponente funktioniert. Wir sind hier, um zu testen, wie Menschen die Komponente verwenden und ihre Erwartungen erfüllen.
Egal, ob der Staat aktualisiert hat oder nicht, ist unerheblich; Was wir testen wollen, ist das Ergebnis dieses Tastenpresses.
Stellen Sie sich vor, wir testen das Ergebnis einer Funktion, die die Benutzeroberfläche vom dunklen Modus in den Lichtmodus ändert. Hier ist die Komponente:
Haben Sie bemerkt, dass wir das neue Attribut hinzugefügt haben?
Data-TestID.
auf den Knopf? So können Sie das testen. Importieren Sie zunächst eine neue Funktion, feuern Sie aus der Testbibliothek feuere:
Import {Cleanup,
feuerevent,
machen
} von '@ testing-bibliothek / reagieren'
Wir können diese Funktion verwenden, um zu testen, dass es Änderungen in der Benutzeroberfläche gibt und dass diese Änderungen konsistent sind:
Das ist großartig: Wir müssen nicht manuell auf die Website gehen und sich umsehen, klicken Sie auf die Schaltfläche und schauen Sie sich ein zweites Mal um - während Sie möglicherweise zugeben, dass Sie wahrscheinlich etwas vergessen oder vermissen! Jetzt können wir Vertrauen haben, dass wir mit derselben Eingabe gegeben, dass wir dieselbe Leistung in unserer Komponente erwarten können.
Wenn es um Test-IDs geht, mag ich es persönlich nicht verwenden
Data-TestID.
etwas im Dom finden. Nach allem ist das Objekt der Tests, um zu ahmen, was der Benutzer tut, und testen, was passiert, was passiert, wenn sie dies tun.
Data-TestID.
Fühlt sich an wie ein bisschen Cheat - obwohl Daten-TestIDs wahrscheinlich für Ihren QA-Ingenieur praktisch sind (siehe Boxout die Rolle der Qualitätssicherungsingenieure).
Stattdessen könnten wir verwenden
getBytext ()
und geben Sie den Text unseres Knopfes weiter. Diese Methode wäre viel mehr Verhaltensspezifische.
08. Mock and Spion die Funktion
Manchmal müssen wir möglicherweise einen Anruf in einer Funktion testen, aber diese Funktion liegt außerhalb des Geltungsbereichs des Tests. Zum Beispiel habe ich ein separates Modul, das eine Funktion enthält, die den Wert von PI an eine bestimmte Anzahl von Dezimalzahlen berechnet.
Ich muss nicht testen, was das Ergebnis dieses Moduls ist. Ich muss testen, dass meine Funktion wie erwartet tut. Weitere Informationen darüber, warum dies ist, lesen Sie bitte die Kästcheneinheit und Integrationstests. In diesem Fall konnten wir diese Funktion "verspotten":
const getPpivalue = jest.fn ()
es ist ('ruft die Funktion auf Click', () = & gt; {
const {container, getBytestid} = rendern (& lt; ToggleButton / & gt;)
fireevent.click (getBytestid ('Mode-Toggle'))
erwarten (getPpivalue). TohaveBeenCalloteTimes (1)
)
})
Die Funktion
THAYBEENECALLEDTIMES ()
ist eine der vielen Helferfunktionen in der Testbibliothek, die uns ermöglicht
um die Ausgabe von Funktionen zu testen. Auf diese Weise können wir unsere Tests nicht nur auf das Modul scope, das wir testen möchten, sondern auch bedeutet, dass wir "spionieren" oder sehen können, was unsere Funktion tut, wenn es diese Funktion nennt.
Schreiben von Tests können ein wenig entmutigend sein, mit dem Sie beginnen können. Ich hoffe, dieses Tutorial hat Ihnen etwas mehr Vertrauen gegeben, um es auszuprobieren. Da ich mit dem Schreiben von Tests für meine Anwendungen angefangen habe
Denken Sie daran, wenn Sie ein komplexes Site bauen, möchten Sie Ihre bekommen
Web-Hosting
Service-Fleck auf. Und wenn diese Site wahrscheinlich viele Vermögenswerte enthält, speichern Sie sie in Zuverlässigkeit
Cloud-Speicherung.
ist entscheidend.
Dieser Inhalt erschien ursprünglich in
Netzmagazin.
. Lesen Sie mehr von unserem
Webdesign-Artikel hier
.
Ich wünschte, Sie könnten eine neue Fähigkeit abholen, aber nicht die Zeit, sich zu finden, sich zu finden und zu lernen? Adobe's.
Machen Sie es jetzt Wiedergabeliste
Könnt..
