Wie richte ich Jest für Reaktionstests ein?

Da immer mehr Entwickler React als Frontend-Framework ihrer Wahl verwenden, wird es immer wichtiger sicherzustellen, dass der von uns geschriebene Code von höchster Qualität ist. Ein wichtiger Aspekt der Qualitätssicherung ist das Testen, und Jest ist ein beliebtes Testframework, das häufig mit React verwendet wird.

Jest ist ein von Facebook entwickeltes Open-Source-Testframework, das das Testen Ihres JavaScript-Codes so einfach und effizient wie möglich machen soll. Es ist schnell, verfügt über eine benutzerfreundliche API und verfügt über eine Reihe integrierter Funktionen, die das Testen zum Kinderspiel machen.

In diesem Artikel führen wir Sie durch den Prozess der Einrichtung von Jest für React-Tests. Wir behandeln alles, was Sie für den Einstieg wissen müssen, von der Installation von Jest bis zum Schreiben Ihres ersten Testfalls.

Scherz für Reaktionstests

Jest ist ein beliebtes Testframework, das zum Testen von React-Anwendungen verwendet wird. Es wurde von Facebook erstellt und ist für seine Benutzerfreundlichkeit und schnelle Einrichtungszeit bekannt. Jest ist so konzipiert, dass es sofort mit React funktioniert und bietet viele Funktionen, die das Testen erleichtern.

Hier sind einige der Funktionen, die Jest zu einer beliebten Wahl zum Testen von React-Anwendungen machen:

i) Snapshot-Testen: Jest bietet eine Snapshot-Testfunktion, mit der Sie die aktuelle Ausgabe einer Komponente mit einem zuvor gespeicherten Snapshot vergleichen können. Dadurch lässt sich leicht überprüfen, ob unbeabsichtigte Änderungen an der Ausgabe der Komponente vorgenommen wurden.

ii) Mocking: Jest bietet integrierte Mocking-Funktionen, mit denen Sie Scheinfunktionen und -module erstellen können. Dies ist nützlich, wenn Sie das Verhalten einer Funktion oder eines Moduls simulieren müssen, die nicht ohne weiteres verfügbar oder schwer zu testen ist.

iii) Codeabdeckung: Jest stellt einen Bericht zur Codeabdeckung bereit, der den Prozentsatz des Codes anzeigt, der von Ihren Tests abgedeckt wird. Dies ist nützlich, um Bereiche Ihres Codes zu identifizieren, die nicht getestet wurden und möglicherweise zusätzliche Aufmerksamkeit erfordern.

iv) Asynchrones Testen: Jest erleichtert das Testen von asynchronem Code, indem es Dienstprogramme zur Verwaltung von asynchronem Code bereitstellt. Auf diese Weise können Sie Tests schreiben, die darauf warten, dass Versprechen oder anderer asynchroner Code aufgelöst werden, bevor Behauptungen aufgestellt werden.

v) Einfache Einrichtung: Jest lässt sich einfach für Ihre React-Anwendung einrichten und konfigurieren. Es wird mit einer Standardkonfiguration geliefert, die sofort einsatzbereit ist, aber an Ihre spezifischen Anforderungen angepasst werden kann.

Insgesamt ist Jest ein leistungsstarkes und flexibles Testframework, das das Testen von React-Anwendungen erleichtert. Seine vielen Funktionen und die einfache Einrichtung machen es zu einer beliebten Wahl für Entwickler, die zuverlässige Tests für ihre React-Komponenten schreiben möchten.

Einrichten von Jest für Reaktionstests

Es gibt bestimmte Schritte, die Sie befolgen müssen, um Jest for React-Tests im Jahr 2023 einzurichten.

1) Installieren Sie Jest

Jest kann mit npm oder Yarn in Ihrem Projekt installiert werden. Hier sind die Schritte zur Installation von Jest mit npm:

i) Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und navigieren Sie zu Ihrem Projektverzeichnis.

ii) Führen Sie den folgenden Befehl aus, um Jest als Entwicklungsabhängigkeit in Ihrem Projekt zu installieren:

npm install –save-dev Scherz

Dieser Befehl installiert Jest und fügt es der package.json-Datei Ihres Projekts im Abschnitt „devDependencies“ hinzu.

Sobald die Installation abgeschlossen ist, können Sie mit dem Schreiben Ihrer Tests mit Jest beginnen. Sie können Ihre Tests mit dem Befehl npm test ausführen. Standardmäßig sucht Jest nach Testdateien, die mit der Erweiterung .test.js oder .spec.js benannt sind. Sie können Jest jedoch so konfigurieren, dass es nach Tests mit anderen Erweiterungen sucht, indem Sie die testMatch-Eigenschaft in Ihrer Jest-Konfigurationsdatei ändern.

Das ist es! Sie haben Jest jetzt in Ihrem Projekt installiert und können mit dem Schreiben von Tests für Ihre Anwendung beginnen.

2) Erstellen Sie eine Konfigurationsdatei

Um eine Konfigurationsdatei für Jest zu erstellen, können Sie eine Datei mit dem Namen jest.config.js im Stammverzeichnis Ihres Projekts erstellen. Diese Datei enthält die Konfigurationsoptionen, die Jest beim Ausführen von Tests verwenden soll.

Hier ist eine Beispielkonfigurationsdatei:

module.exports = {

// Gibt an, welche Dateitypen als Testdateien betrachtet werden sollen.

testMatch: [

'**/__tests__/**/*.js?(x)',

'**/?(*.)+(spec|test).js?(x)'

],

// Eine Liste von Pfaden zu Verzeichnissen, die Jest zum Suchen nach Dateien verwenden soll.

root: ['<rootDir>/src'],

// Eine Zuordnung von regulären Ausdrücken zu Pfaden zu Transformatoren.

transformieren: {

'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'

},

// Die Glob-Muster, die Jest verwendet, um Testdateien zu erkennen.

testPathIgnorePatterns: [

'<rootDir>/node_modules/',

'<rootDir>/build/'

],

// Eine Liste von Reporternamen, die Jest beim Schreiben von Berichterstattungsberichten verwendet.

CoverageReporters: ['json', 'text', 'html'],

// Ein Array von Dateierweiterungen, die Ihre Module verwenden.

moduleFileExtensions: ['js', 'json', 'jsx']

};

Diese Beispielkonfigurationsdatei gibt die folgenden Optionen an:

a) testMatch: Gibt das Muster an, das zur Identifizierung von Testdateien verwendet wird.

b) Roots: Gibt die Verzeichnisse an, in denen Jest nach Dateien suchen soll.

c) transform: Gibt die Transformationen an, die Jest vor der Ausführung von Tests auf Dateien anwenden soll.

d) testPathIgnorePatterns: Gibt die Muster an, die bei der Suche nach Testdateien ignoriert werden sollen.

e) CoverageReporters: Gibt die Reporter an, die Jest zum Generieren von Coverage-Berichten verwenden soll.

f) moduleFileExtensions: Gibt die Dateierweiterungen an, nach denen Jest bei der Suche nach Dateien suchen soll.

Sie können diese Konfigurationsdatei an die Anforderungen Ihres Projekts anpassen. Sobald Sie Ihre Konfigurationsdatei erstellt haben, verwendet Jest diese automatisch, wenn Tests in Ihrem Projekt ausgeführt werden.

3) Schreiben Sie Ihre Tests

Sobald Sie Jest installiert und Ihre Konfigurationsdatei eingerichtet haben, können Sie mit dem Schreiben von Tests für Ihre React-Anwendung beginnen. Hier sind die Schritte zum Erstellen einer Testdatei und zum Schreiben eines Tests:

i) Erstellen Sie eine neue Datei mit der Erweiterung .test.js oder .spec.js . Dies wird Ihre Testdatei sein.

ii) Importieren Sie in die Testdatei die Komponente oder Funktion, die Sie testen möchten:

import { sum } from './myFunctions';

iii) Schreiben Sie Ihren Test. Ein Test ist eine Funktion, die mithilfe der Jest-API überprüft, ob sich die Komponente oder Funktion wie erwartet verhält:

beschreiben('sum', () => {

test('addiert 1 + 2 zu 3', () => {

erwarten(sum(1, 2)).toBe(3);

});

});

In diesem Beispiel testen wir eine einfache Summenfunktion, die zwei Zahlen addiert. Die Beschreibungsfunktion gruppiert zusammengehörige Tests, während die Testfunktion einen einzelnen Testfall spezifiziert. Die Expect-Funktion prüft, ob die Summenfunktion den erwarteten Wert zurückgibt.

iv) Führen Sie Ihre Tests durch, indem Sie den Befehl npm test in Ihrem Projektverzeichnis ausführen. Jest sucht in Ihrem Projekt nach Testdateien und führt alle gefundenen Tests aus.

Sie können so viele Tests hinzufügen, wie Sie benötigen, um die gesamte Funktionalität Ihrer Komponente oder Funktion abzudecken. Jest bietet eine breite Palette an Übereinstimmungen und anderen Dienstprogrammen, mit denen Sie komplexere Tests erstellen können.

Durch das Schreiben von Tests für Ihre React-Anwendung können Sie sicherstellen, dass Ihr Code wie erwartet funktioniert, und die Einführung von Regressionen vermeiden, wenn Sie Änderungen an Ihrer Codebasis vornehmen.

4) Führen Sie Ihre Tests durch

Um Ihre Tests mit Jest auszuführen, können Sie den Befehl npm test in Ihrem Projektverzeichnis verwenden. Jest erkennt automatisch alle Testdateien in Ihrem Projekt und führt sie aus, die dem in Ihrer Jest-Konfigurationsdatei angegebenen Muster entsprechen.

Wenn Sie npm test ausführen, gibt Jest die Ergebnisse Ihrer Tests in der Konsole aus. Wenn alle Tests erfolgreich sind, zeigt Jest eine Zusammenfassung der Testergebnisse an:

PASS src/components/Example.test.js

✓ Rendern ohne Absturz (21 ms)

Testsuiten: 1 bestanden, 1 insgesamt

Tests: 1 bestanden, 1 insgesamt

Schnappschüsse: insgesamt 0

Zeit: 3,204 Sekunden, geschätzte 4 Sekunden

Alle Testsuiten ausgeführt.

Wenn ein Test fehlschlägt, zeigt Jest eine Fehlermeldung an, die den Fehler und den Ort des fehlgeschlagenen Tests beschreibt:

FAIL src/components/Example.test.js

• Beispielkomponente › wird ohne Absturz gerendert

TypeError: Die Eigenschaft „Map“ von undefiniert kann nicht gelesen werden

10 | render() {

11 | const { items } = this.props;

> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

bei example.render (src/components/Example.js:12:17)

bei ReactTestRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

bei Object.<anonymous> (src/components/Example.test.js:9:16)

Testsuiten: 1 fehlgeschlagen, 1 insgesamt

Tests: 1 fehlgeschlagen, 1 insgesamt

Schnappschüsse: insgesamt 0

Zeit: 3,537 Sekunden, geschätzte 4 Sekunden

Alle Testsuiten ausgeführt.

Jest bietet außerdem eine Reihe von Optionen, mit denen Sie das Verhalten Ihrer Tests anpassen können, z. B. das Ausführen von Tests im Überwachungsmodus, das Erstellen von Codeabdeckungsberichten und mehr. Weitere Informationen zu diesen Optionen finden Sie in der Jest-Dokumentation.

Zusammenfassung

LambdaTest ist eine leistungsstarke cloudbasierte Testplattform, die in Verbindung mit Jest zum Testen von React-Anwendungen verwendet werden kann. Durch die Nutzung der Skalierbarkeit der cloudbasierten Infrastruktur von LambdaTest können Sie Ihre Jest-Tests schnell und effizient auf einer Vielzahl von Browsern und Geräten ausführen und so sicherstellen, dass Ihre Anwendung in verschiedenen Umgebungen wie erwartet funktioniert.

In diesem Blog haben wir die Schritte behandelt, die zum Einrichten von Jest zum Testen von React-Anwendungen erforderlich sind. Wir haben auch gelernt, wie man Jest für die Verwendung von LambdaTest als Testumgebung konfiguriert, Tests mit Jest schreibt und Tests auf der cloudbasierten Infrastruktur von LambdaTest ausführt.

Die gemeinsame Verwendung von LambdaTest und Jest bietet React-Entwicklern eine robuste Testlösung, die ihnen dabei helfen kann, Regressionen und Fehler frühzeitig im Entwicklungszyklus zu erkennen und so die Gesamtqualität ihrer Anwendungen zu verbessern.

Wenn Sie also Ihren React-Testworkflow optimieren möchten, sollten Sie die gemeinsame Verwendung von LambdaTest und Jest in Betracht ziehen, um umfassende, skalierbare und effiziente Tests für Ihre React-Anwendungen zu erreichen.