Das Schreiben von Tests kann mühsam und repetitiv sein. Möglicherweise haben Sie das Gefühl, wertvolle Zeit zu verschwenden, die Sie lieber für die Arbeit an Funktionen verwenden würden. Wenn Sie jedoch Anwendungen versenden möchten, von denen Sie überzeugt sind, sollten Sie Tests schreiben.
Durch das Testen können Sie Fehler und Bugs erkennen, die Sie andernfalls möglicherweise an die Benutzer senden würden. Es verbessert daher die Benutzererfahrung Ihrer Anwendung und erspart Ihnen das Debuggen von Produktionscode.
Mit Jest und der React Testing Library können Sie ganz einfach Tests in React schreiben.
Was sollten Sie in React testen?
Die Entscheidung, was getestet werden soll, kann schwierig sein. Obwohl Tests großartig sind, sollten Sie nicht jede Zeile in Ihrer React-Anwendung testen. Dies wird Sie mit spröden Tests zurücklassen, die bei der geringsten Änderung in Ihrer App brechen.
Stattdessen sollten Sie nur die Endbenutzerimplementierung testen. Das bedeutet, zu testen, wie der Endbenutzer Ihre Anwendung verwenden wird, anstatt das Innenleben Ihrer App zu testen.
Stellen Sie außerdem sicher, dass Sie die am häufigsten verwendeten Komponenten in Ihrer Anwendung testen, z. B. die Zielseite oder die Anmeldekomponente. Testen Sie auch die wichtigsten Funktionen in Ihrer Anwendung. Das können zum Beispiel Features sein, die Geld bringen, wie die Warenkorb-Funktion.
Wenn Sie entscheiden, was getestet werden soll, sollten Sie niemals die Funktionalität testen, die React selbst handhabt. Anstatt beispielsweise die Gültigkeit von Props zu testen, können Sie React PropTypes verwenden.
Testen einer Schaltflächenkomponente
Denken Sie daran, dass Sie nur die Endbenutzerimplementierung einer Komponente testen sollten und nicht ihre interne Funktionsweise. Für eine Schaltflächenkomponente bedeutet dies, zu überprüfen, ob sie ohne Absturz gerendert und korrekt angezeigt wird.
Erstellen Sie eine neue Datei in der Quelle Ordner aufgerufen Button.js und fügen Sie den folgenden Code hinzu.
FunktionTaste({Wert}) {
Rückkehr (
<Taste>{Wert}</button>
)
}
ExportUrsprünglich Taste
Button.js akzeptiert eine Eigenschaft namens value und verwendet sie als Schaltflächenwert.
Schreiben Sie Ihren ersten Test
EIN Create-React-App-Anwendung ist mit Jest und der React Testing Library vorinstalliert. Jest ist eine leichtgewichtige Testbibliothek mit integrierten Mocking- und Assertion-Funktionen. Es funktioniert mit vielen JavaScript-Frameworks. Die React Testing Library hingegen bietet Funktionen, mit denen Sie testen können, wie Benutzer mit Komponenten interagieren.
Erstellen Sie eine neue Datei mit dem Namen Button.test.js im src-Ordner. Standardmäßig identifiziert Jest Dateien mit der Endung .test.js als Testdateien und führt sie automatisch aus. Eine andere Möglichkeit besteht darin, Ihre Testdateien zu einem Ordner mit dem Namen __ hinzuzufügen.Tests__.
Fügen Sie den folgenden Code in Button.test.js hinzu, um den ersten Test zu erstellen.
importieren {rendern} aus '@testing-library/react';
importieren Taste aus '../Taste';
beschreiben('Button-Komponente', () => {
Prüfung('Rendert die Schaltflächenkomponente ohne Absturz', () => {
machen(<Taste />);
});
})
Dieser Test definiert zunächst, worum es bei dem Test geht, indem er den von Jest bereitgestellten Beschreibungsblock verwendet. Dieser Block ist nützlich, um zusammengehörige Tests zu gruppieren. Hier gruppieren Sie die Tests für die Button-Komponente.
Innerhalb des Beschreibungsblocks haben Sie den ersten Test im Testblock. Dieser Block akzeptiert eine Zeichenfolge, die beschreibt, was der Test tun soll, und eine Rückruffunktion, die die Erwartung ausführt.
In diesem Beispiel sollte der Test die Button-Komponente ohne Absturz rendern. Die Render-Methode aus der React Testing Library führt den eigentlichen Test durch. Es prüft, ob die Button-Komponente korrekt gerendert wird. Wenn dies der Fall ist, ist der Test bestanden, andernfalls schlägt er fehl.
Verwenden von Rollen zum Suchen der Schaltfläche
Manchmal möchten Sie überprüfen, ob das Element montiert wurde. Die screen-Methode hat eine getByRole()-Funktion, die Sie verwenden können, um ein Element aus dem DOM zu holen.
screen.getByRole('Taste')
Sie können das gegriffene Element dann verwenden, um Tests durchzuführen, z. B. um zu überprüfen, ob es im Dokument vorhanden ist oder korrekt gerendert wurde.
getByRole() ist eine von vielen Abfragen, die Sie verwenden können, um Elemente in einer Komponente auszuwählen. Sehen Sie sich andere Arten von Abfragen in The an React Testing Library Leitfaden „Welche Abfrage sollte ich verwenden?“. Auch andere als die „Knopf“-Rolle, die meisten semantische HTML-Elemente verfügen über implizite Rollen, die Sie zum Ausführen Ihrer Abfragen verwenden können. Finden Sie die Liste der Rollen von MDN-Dokumente.
Fügen Sie dem Testblock Folgendes hinzu, um die Renderkomponenten zu überprüfen.
Prüfung('Rendert die Schaltfläche ohne Absturz', () => {
machen(<Schaltflächenwert="Anmelden" />);
erwarten (screen.getByRole('Taste')).toBeInTheDocument()
});
Der Matcher toBeInTheDocument() prüft, ob das Button-Element im Dokument vorhanden ist.
Erwarten Sie, dass die Schaltfläche korrekt gerendert wird
Die Button-Komponente akzeptiert einen Prop-Wert und zeigt ihn an. Damit es korrekt gerendert wird, muss der angezeigte Wert mit dem von Ihnen übergebenen übereinstimmen.
Erstellen Sie einen neuen Testblock und fügen Sie den folgenden Code hinzu.
Prüfung('Rendert Schaltfläche korrekt', () => {
machen(<Schaltflächenwert="Anmeldung" />);
erwarten (screen.getByRole('Taste')).toHaveTextContent("Anmeldung")
})
Beachten Sie, dass Sie nach Tests keine Aufräumarbeiten durchführen müssen, wenn Sie die React Testing Library verwenden. In früheren Versionen mussten Sie die Bereinigung wie folgt manuell durchführen:
afterEach (Bereinigung)
Jetzt hängt die Testbibliothek Komponenten automatisch nach jedem Rendern aus.
Erstellen von Snapshot-Tests
Bisher haben Sie das Verhalten der Button-Komponente getestet. Schreiben Sie Snapshot-Tests, um zu testen, ob die Ausgabe der Komponente gleich bleibt.
Snapshot-Tests vergleichen die aktuelle Ausgabe mit einer gespeicherten Ausgabe der Komponente. Wenn Sie beispielsweise den Stil einer Button-Komponente ändern, werden Sie vom Snapshot-Test benachrichtigt. Sie können entweder den Schnappschuss aktualisieren, damit er mit der geänderten Komponente übereinstimmt, oder die Stiländerungen rückgängig machen.
Snapshot-Tests sind sehr nützlich, wenn Sie sicherstellen möchten, dass sich Ihre Benutzeroberfläche nicht unerwartet ändert.
Snapshot-Tests unterscheiden sich von Komponententests, da Sie bereits funktionierenden Code benötigen, um den Snapshot zu erstellen.
Sie verwenden die Renderer-Methode aus dem npm-Paket „react-test-renderer“. Führen Sie also den folgenden Code aus, um ihn zu installieren.
npm Installieren reagieren-Prüfung-Renderer
Schreiben Sie in Button.test.js den Snapshot-Test wie folgt:
Prüfung('Stimmt mit Momentaufnahme überein', () => {
const tree = renderer.create (<Schaltflächenwert="Anmeldung" />).toJSON();
erwarten von(Baum).toMatchSnapshot();
})
Es sind keine Snapshots für die Button-Komponente vorhanden, daher wird beim Ausführen dieses Tests neben der Testdatei eine Snapshot-Datei erstellt:
Taste
└─── __Tests__
│ │ Taste.tests.js
│ └─── __Schnappschuss__
│ │ Taste.Prüfung.js.schnapp
│
└─── Taste.js
Wenn Sie jetzt den nächsten Test ausführen, vergleicht React den neuen Snapshot, den es generiert, mit dem gespeicherten.
Schreiben Sie Tests für die am häufigsten verwendeten Komponenten
In diesem Tutorial haben Sie gelernt, wie Sie DOM- und Snapshot-Tests in React schreiben, indem Sie eine Button-Komponente testen. Das Schreiben von Tests für alle von Ihnen erstellten Komponenten kann mühsam sein. Diese Tests sparen Ihnen jedoch die Zeit, die Sie für das Debuggen von bereits bereitgestelltem Code aufgewendet hätten.
Sie müssen keine 100-prozentige Testabdeckung erreichen, aber stellen Sie sicher, dass Sie Tests für Ihre am häufigsten verwendeten und wichtigsten Komponenten schreiben.
