So testen Sie React-Websites und -Apps

Testreaktion
(Bildnachweis: Zukunft)

Wenn Sie wissen möchten, wie Sie React testen können, sind Sie hier richtig. Wissen Sie wirklich, dass Ihr Code das tut, was er tun soll? Haben Sie es im Browser getestet? Was ist, wenn Sie nicht alles haben oder nicht alles testen können und die Produktion unterbrochen wird?

Eine Testbibliothek ist eine Gruppe von Dienstprogrammen, mit denen Entwickler einzelne Tests für Anwendungskomponenten schreiben. Einige der Hauptteile eines Tests sind:

  • Beschreibung: beschreibt, worum es bei dem Test geht
  • Verwenden / Rendern: Verwendet die Komponente in einer Umgebung, in der sie getestet werden kann
  • Verspottung: erstellt vorgetäuschte Funktionen, damit Sie Ihre Annahmen überprüfen können

Im Verlauf dieses Artikels werde ich einige Beispiele aus der React Testing Library untersuchen, um Ihnen den Einstieg in diese wertvolle Methode zur Verbesserung der Robustheit Ihrer Code-Ausgabe zu erleichtern und sicherzustellen, dass Ihr Code nicht geworfen wird Machen Sie böse Überraschungen, sobald es in Produktion geht.



Wünschen Sie weitere nützliche Ressourcen? Hier ist ein Überblick über die Besten Webdesign-Tools Das hilft Ihnen dabei, klüger zu arbeiten. Oder wenn Sie eine neue Maschine benötigen, versuchen Sie diese Zusammenfassung der beste Laptops zum Programmieren . Oder wenn Sie eine neue Site erstellen, benötigen Sie möglicherweise eine großartige Webseitenersteller .

01. Beginnen Sie mit der React-Testbibliothek

Ich werde für diese Demo die Create-React-App verwenden, da sie bereits mit der Testbibliothek vorkonfiguriert ist. Wenn Sie Gatsby oder ein benutzerdefiniertes Setup verwenden, müssen Sie möglicherweise einige Konfigurationen durchführen, bevor Sie die Testbibliothek verwenden können.

Erstellen wir zunächst eine neue App. Wenn Sie bereits eine aktuelle Version von Node.js haben, können Sie den folgenden Befehl ausführen, ohne global etwas anderes zu installieren:

npx create-react-app netmag-javascript-testing

02. Entscheide, was getestet werden soll

Stellen Sie sich vor, wir haben eine einfache Komponente, beispielsweise eine Schaltfläche mit einem bestimmten Status. Welche Dinge müssen in einer solchen Komponente getestet werden?

Das Aussehen der Komponente:

Wir möchten nicht, dass sich etwas unerwartet ändert, nachdem wir unsere Komponente geschrieben haben. Wir werden also einen Snapshot-Test schreiben, um zu erfassen, wie er gerendert wird. Wenn sich dann etwas ändert, werden wir es ohne manuellen oder visuellen Test schnell sehen. Dies ist ideal für Komponenten, die aus vielen kleineren Komponenten bestehen: Sie können schnell erkennen, wann (und wo) das Erscheinungsbild beeinträchtigt wurde.

Die verschiedenen Zweige, die rendern:

Da wir zwei oder mehr verschiedene Ausgänge haben könnten, müssen wir testen, ob alle korrekt wiedergegeben werden, nicht nur einer. Wir müssen also ein Klickereignis simulieren und einen weiteren Snapshot-Test für die Darstellung durchführen, nachdem dieser Codezweig ausgeführt wurde.

Diese Funktionen werden wie erwartet aufgerufen:

Wir möchten sicherstellen, dass der Code, den wir zum Aufrufen einer anderen Funktion geschrieben haben, so funktioniert, wie wir es annehmen. Da es sich bei dieser Funktion jedoch um eine externe Abhängigkeit handelt, möchten wir dies hier nicht testen. Unsere Tests sollten nur die Funktionalität enthalten, die wir möchten.

03. Schreiben Sie Ihren ersten Test

Testreaktion

(Bild: Ben Read)

Schreiben wir unseren ersten Test. Erstellen Sie eine neue Datei mit dem Namen MyComponent.unit.test.js im selben Ordner wie die Komponente. Durch Hinzufügen von test.js am Ende wird es automatisch von der Testbibliothek ausgewählt. Der Inhalt dieser Datei ist unten:

import React from ‘react’ import { render } from ‘@testing-library/react’ import MyComponent from ‘./MyComponent’ describe(‘the ’, () => { // tests go here })

Das erste, worauf ich Sie aufmerksam machen möchte, ist das beschreiben () Funktion, die zwei Argumente akzeptiert: Die erste ist eine Zeichenfolge, mit der Sie besser als Textzeichenfolge beschreiben können, was Ihr Test tun wird. In unserem Fall haben wir einfach gesagt, dass es rendern soll. Dies ist sehr nützlich, wenn sich jemand anderes Ihren Code ansieht oder Sie sich zu einem späteren Zeitpunkt daran erinnern müssen, was Sie getan haben. Das Schreiben guter Beschreibungsanweisungen ist eine Form der Codedokumentation und ein weiterer guter Grund für das Schreiben von Tests.

Das zweite Argument sind Ihre Tests. Das beschreiben () Die Funktion führt alle diese Tests nacheinander aus.

04. Verwenden Sie die Bereinigungsfunktion

Lassen Sie uns eine Hilfsfunktion namens einführen vor jedem () . Wir müssen dies verwenden, da wir jedes Mal, wenn wir etwas mit der Komponente tun, eine neue Kopie wünschen, ohne dass die Requisiten, die wir zuvor an sie übergeben hatten, noch in der Komponente vorhanden sind. Oder wir müssen die Komponente möglicherweise neu rendern: vor jedem () tut das für uns und wir können es die Bereinigungsfunktion übergeben.

import { render, cleanup } from ‘@testing-library/react’ ... describe(‘the component should render’, () => { beforeEach(cleanup) }

05. Schreiben Sie einen Schnappschuss-Test

Testreaktion

(Bild: Ben Read)

In diesem Schritt werden wir unsere Komponente 'mounten' (oder rendern).

describe(‘the component should render’, () => { beforeEach(cleanup) it(‘renders with basic props’, () => { render() }) }

Dieses Rendering ermöglicht uns den Zugriff auf alle gerenderten Eigenschaften der kompilierten Komponente. Es könnte gut sein, dies in a fallen zu lassen console.log () So können Sie klarer sehen, was es tut.
Wenn Sie dies tun, werden Sie feststellen, dass es einige nützliche Eigenschaften gibt, die wir hier nutzen können. Ich werde eine Aussage machen (eine testbare Erklärung abgeben) und sie testen, indem ich den Container extrahiere. Der Container enthält die DOM-Knoten (den gesamten HTML-Code), die der Komponente zugeordnet sind.

it(‘renders with basic props’, () => { const { container } = render() })

Jetzt haben wir Zugriff auf den Container. Wie kann ich feststellen, dass er gemäß meiner Behauptung gerendert wurde? Durch Hinzufügen eines Snapshot-Tests.

Stellen Sie sich einen Schnappschuss wie ein Foto vor. Es wird zu einem bestimmten Zeitpunkt eine Momentaufnahme unserer Komponente erstellt. Wenn wir dann Änderungen am Code vornehmen, können wir feststellen, ob dieser noch mit dem ursprünglichen Schnappschuss übereinstimmt. In diesem Fall können wir sicher sein, dass sich an der Komponente nichts geändert hat. Wenn dies nicht der Fall ist, haben wir möglicherweise ein Problem entdeckt, das von einer anderen Komponente stammt, die wir zuvor möglicherweise nicht entdeckt haben:

06. Testeigenschaften

Requisiten oder Eigenschaften einer Komponente können auch mit Schnappschüssen getestet werden. Wenn Sie die verschiedenen Requisiten testen, die Sie Ihrer Komponente zur Verfügung stellen, erhalten Sie mehr Abdeckung und Vertrauen. Sie wissen nie, wann eine Anforderung bedeutet, dass die Requisiten Ihrer Komponente überarbeitet werden und sich die endgültige Ausgabe ändert.

Fügen Sie das folgende Objekt oben in Ihre Datei ein:

Unterschied zwischen cintiq und cintiq pro
const lightProperties = { backgroundColour: ‘white’, textColour: ‘darkblue’ }

Wir definieren die Eigenschaften in einem Objekt und verwenden dann den Spread-Operator (drei Punkte, gefolgt vom Objektnamen: ... Lichteigenschaften) weil wir nur ein Argument übergeben können, wenn wir auf diese Weise rendern. Es ist auch nützlich zu sehen, welche Eigenschaften Sie isoliert übergeben:

it(‘renders with basic props’, () => { const { container } = render( ) expect(container).toMatchSnapshot() }) it(‘renders with the light version props’, () => { const { container } = render( ) expect(container).toMatchSnapshot() })

07. Testen Sie Änderungen in der Benutzeroberfläche

Stellen Sie sich vor, unsere Komponente verfügt über eine Schaltfläche, und Sie möchten sicherstellen, dass beim Klicken auf die Schaltfläche etwas passiert. Möglicherweise möchten Sie den Status der Anwendung testen. Sie könnten beispielsweise versucht sein zu testen, ob der Status aktualisiert wurde. Dies ist jedoch nicht Gegenstand dieser Tests.

Dies führt uns in ein wichtiges Konzept bei der Verwendung einer Testbibliothek ein: Wir sind nicht hier, um den Status oder die Funktionsweise unserer Komponente zu testen. Wir sind hier, um zu testen, wie Benutzer die Komponente verwenden und ob sie ihren Erwartungen entspricht.

Es ist also unerheblich, ob der Staat aktualisiert wurde oder nicht. Was wir testen wollen, ist das Ergebnis dieses Knopfdrucks.

Stellen wir uns vor, wir testen das Ergebnis einer Funktion, die die Benutzeroberfläche vom Dunkelmodus in den Hellmodus ändert. Hier ist die Komponente:

const modeToggle = () => { const [mode, setMode] = useState[‘light’] const toggleTheme = () => { if (theme === ‘light’) { setTheme(‘dark’) } else { setTheme(‘light’) } } return ( Toggle mode ) }

Zuerst sollten wir der Schaltfläche eine Test-ID hinzufügen, damit wir sie in der Renderphase finden können:

return ( Toggle mode

Haben Sie bemerkt, dass wir das neue Attribut hinzugefügt haben? Datentests auf den Knopf? Hier erfahren Sie, wie Sie das testen können. Importieren Sie zunächst eine neue Funktion, fireEvent, aus der Testbibliothek:

import { cleanup, fireEvent, render } from ‘@testing-library/react’

Wir können diese Funktion verwenden, um zu testen, ob Änderungen in der Benutzeroberfläche vorliegen und ob diese Änderungen konsistent sind:

it(‘renders with basic props’, () => { const { container } = render( ) expect(container).toMatchSnapshot() }) it(‘renders the light UI on click’, () => { const { container, getByTestId } = render() fireEvent.click(getByTestId(‘mode-toggle’)) expect(container).toMatchSnapshot() })

Das ist großartig: Wir müssen nicht manuell auf die Website gehen und uns umschauen, dann auf die Schaltfläche klicken und uns ein zweites Mal umschauen - währenddessen werden Sie wahrscheinlich etwas vergessen oder verpassen! Jetzt können wir darauf vertrauen, dass wir bei gleichem Input den gleichen Output in unserer Komponente erwarten können.

Wenn es um das Testen von IDs geht, verwende ich sie persönlich nicht gern Datentests etwas im DOM finden. Schließlich besteht das Ziel von Tests darin, nachzuahmen, was der Benutzer tut, und zu testen, was passiert, wenn er dies tut. Datentests fühlt sich wie ein Betrüger an - obwohl Datentestiden für Ihren QS-Techniker wahrscheinlich nützlich sein werden (siehe Kasten Die Rolle der Qualitätssicherungsingenieure).

Stattdessen könnten wir verwenden getByText () und geben Sie den Text unserer Schaltfläche ein. Diese Methode wäre viel verhaltensspezifischer.

08. Verspotten und spionieren Sie die Funktion aus

Manchmal müssen wir möglicherweise einen Aufruf einer Funktion testen, aber diese Funktion liegt außerhalb des Testbereichs. Zum Beispiel habe ich ein separates Modul, das eine Funktion enthält, die den Wert von pi auf eine bestimmte Anzahl von Dezimalstellen berechnet.

Ich muss nicht testen, was das Ergebnis dieses Moduls ist. Ich muss testen, ob meine Funktion wie erwartet funktioniert. Weitere Informationen dazu finden Sie im Feld Unit- und Integrationstests. In diesem Fall könnten wir diese Funktion 'verspotten':

const getPiValue = jest.fn() it(‘calls the function on click’, () => { const { container, getByTestId } = render() fireEvent.click(getByTestId(‘mode-toggle’)) expect(getPiValue).toHaveBeenCalledTimes(1) ) })

Die Funktion toHaveBeenCalledTimes () ist eine der vielen Hilfsfunktionen in der Testbibliothek, die uns ermöglichen

um die Ausgabe von Funktionen zu testen. Auf diese Weise können wir unsere Tests nicht nur auf das Modul beschränken, das wir testen möchten, sondern auch 'ausspionieren' oder sehen, was unsere Funktion tut, wenn sie diese Funktion aufruft.

09. Testen Sie React-Anwendungen

Testreaktion

(Bild: React Testing Library)

Das Schreiben von Tests kann zunächst etwas entmutigend wirken. Ich hoffe, dieses Tutorial hat Ihnen ein wenig mehr Selbstvertrauen gegeben, es auszuprobieren. Seit ich angefangen habe, Tests für meine Anwendungen zu schreiben, kann ich wirklich nicht mehr zurück: Ich kann mich leichter ausruhen, weil ich weiß, dass ich ein viel besseres Erbe für diejenigen hinterlasse, die meine Arbeit in Zukunft nutzen werden.

Weitere Ideen zum Testen Ihrer Komponenten finden Sie unter Testbibliothek reagieren oder Testbeispiele reagieren . Wenn Sie nach Kursen suchen, die Ihnen den Einstieg erleichtern, der von Kent C Dodds (Wer hat React Testing Library geschrieben und pflegt) ist beliebt. Ich habe es auch genossen dieses auf Level Up Tutorials Es ist das, was mich dazu gebracht hat, Tests für meinen Code zu schreiben.

Denken Sie daran, wenn Sie eine komplexe Site erstellen, möchten Sie Ihre erhalten Web-Hosting Service genau richtig. Und wenn diese Site wahrscheinlich viele Assets enthält, speichern Sie diese zuverlässig Cloud-Speicher ist entscheidend.

Dieser Inhalt erschien ursprünglich in Netzmagazin . Lesen Sie mehr von unseren Webdesign-Artikel hier .

Weiterlesen: