So testen Sie Next.js-Anwendungen mit Jest

Das Hauptziel jedes Entwicklungsprozesses besteht darin, produktionsreife Anwendungen zu erstellen. Um dies zu erreichen, ist es wichtig, Code zu schreiben, der nicht nur die funktionalen Anforderungen erfüllt, sondern auch über einen längeren Zeitraum stabil und zuverlässig bleibt. Tests dienen als Schutz und stellen sicher, dass Anwendungen auch dann wie erwartet funktionieren, wenn während der Entwicklung neue Updates vorgenommen werden.

Während das Schreiben umfassender Tests, die verschiedene Grenzfälle umfassen, viel Zeit in Anspruch nehmen kann, hilft es, Probleme zu erkennen und zu lösen, bevor sie die Produktionsumgebung erreichen.

Testen von Next.js-Anwendungen

Das Schreiben von Tests ist ein wesentlicher und oft unterschätzter Aspekt bei der Entwicklung robuster Anwendungen. Es ist leicht, der Versuchung zu erliegen, Code direkt in die Produktion zu schicken und sich dabei auf den Glauben zu verlassen: „Sie haben den Code geschrieben, also muss er funktionieren!“

Allerdings kann dieser Ansatz zu unvorhergesehenen Problemen und Fehlern in Produktionsumgebungen führen. Daher kann die Einführung eines testgetriebenen Entwicklungsansatzes (TDD) dazu beitragen, Ihr Vertrauen in Ihren Code zu maximieren und den Zeitaufwand zu minimieren Debuggen und Beheben kleinerer Fehler das hätte in die Produktion verrutschen können.

Was ist Scherz?

Scherz ist ein beliebtes Test-Framework, das von verschiedenen Benutzern häufig verwendet wird JavaScript-Frameworks. Es bietet eine Reihe von Testfunktionen wie einen leistungsstarken Testläufer, automatisches Mocking und Snapshot-Tests.

Im Idealfall sind diese Funktionen hilfreich, um eine umfassende Testabdeckung zu erreichen und die Zuverlässigkeit Ihrer Anwendung übergreifend sicherzustellen verschiedene Arten von Tests.

Erstellen Sie eine Next.js To-Do-Anwendung

Schauen wir uns nun den Prozess der Ausführung von Unit-Tests für eine Next.js-Anwendung mithilfe von Jest genauer an. Bevor Sie jedoch beginnen, erstellen Sie ein Next.js-Projekt und installieren Sie die erforderlichen Abhängigkeiten.

Führen Sie zunächst die folgenden Schritte aus:

1. Erstellen Sie ein neues Next.js-Projekt, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

   npx create-next-app@latest test-tutorial

2. Navigieren Sie nach dem Erstellen des Projekts in das Projektverzeichnis, indem Sie Folgendes ausführen:

   cd nextjs-test-tutorial

3. Installieren Sie die erforderlichen Abhängigkeiten als devDependencies indem Sie den folgenden Befehl ausführen:

   npm install npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Nachdem das Projekt eingerichtet und die Abhängigkeiten installiert sind, können Sie nun die Next.js-Anwendung erstellen und Komponententests mit Jest schreiben.

Erstellen Sie die To-Do-Komponente

Im /src Projektverzeichnis, öffnen Sie das seiten/index.js Datei, löschen Sie den vorhandenen Boilerplate-Next.js-Code und fügen Sie den folgenden Code hinzu.

Führen Sie zunächst die folgenden Importe durch und definieren Sie zwei Funktionen, die die To-Dos der Benutzer verwalten: addTodo Funktion und deleteTodo Funktion.

importieren { useState } aus"reagieren";
importieren Stile aus"../styles/Home.module.css";
ExportStandardFunktionHeim() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
const addTodo = () => {
Wenn (newTodo.trim() !== "") {
const aktualisiertTodos = [...todos, newTodo];
 setTodos (updatedTodos);
 setNewTodo("");
 }
 };
const deleteTodo = (Index) => {
const aktualisiertTodos = [...todos];
 aktualisiertTodos.splice (Index, 1);
 setTodos (updatedTodos);
 };

Der Code nutzt die useState Hook zum Initialisieren und Aktualisieren der Statusvariablen: alles Und newTodo. Der addTodo Die Funktion fügt der Aufgabenliste eine neue Aufgabe hinzu, wenn der Eingabewert nicht leer ist, während die deleteTodo Die Funktion entfernt eine bestimmte Aufgabe basierend auf ihrem Index aus der Liste.

Schreiben Sie nun den Code für die JSX-Elemente, die im DOM des Browsers gerendert werden.

zurückkehren (


 Typ="Text"
 className={styles.input}
 value={newTodo}
 data-testid=„Todo-Eingabe“
 onChange={(e) => setNewTodo (e.target.value)}
 />
„add-todo“>
 Todo hinzufügen
 </button>
"Aufgabenliste">
 {todos.map((Todo, Index) => (


 {machen}
 </li>
 ))}
 </ul>
 {todos.map((Todo, Index) => (


 onClick={() => deleteTodo (index)}
 className={styles.button}
 data-testid={`delete-todo-${index}`}
 >
 Löschen
 </button>
 </div>
 ))}
 </div>
 );}

Testfälle schreiben

Bevor Sie mit dem Schreiben von Testfällen beginnen, ist es wichtig, Jest entsprechend Ihren spezifischen Testanforderungen zu konfigurieren. Dies beinhaltet das Erstellen und Anpassen der jest.config.js Datei, die als Grundlage für Ihr Test-Setup dient.

Erstellen Sie im Stammverzeichnis ein neues jest.config.js Datei. Fügen Sie dann den folgenden Code hinzu, um Jest entsprechend zu konfigurieren:

const nextJest = erfordern(„nächster/Scherz“);
const createJestConfig = nextJest({
 dir: "./",
});
const customJestConfig = {
 Modulverzeichnisse: [„node_modules“, "/"],
 Test Umgebung: „jest-environment-jsdom“,
};
Modul.exports = createJestConfig (customJestConfig);

Öffnen Sie abschließend die package.json Datei und fügen Sie ein neues Skript mit dem Namen hinzu prüfen Dadurch wird der Befehl ausgeführt Scherz --watchAll um alle Testfälle auszuführen und auf etwaige Änderungen zu achten.

Nach der Aktualisierung sollten Ihre Skripte wie folgt aussehen:

„Skripte“: {
„Entwickler“: „nächster Entwickler“,
"bauen": „Nächster Build“,
"Start": „Nächster Start“,
"Fussel": „nächster Flusen“,
"prüfen": „jest --watchAll“
 },

Sobald die Konfigurationen vorhanden sind, fahren Sie mit dem Schreiben und Ausführen von Tests fort.

Testen der Next.js To-Do-App mit Jest

Erstellen Sie im Stammverzeichnis des Projekts einen neuen Ordner mit dem Namen __tests__. Jest sucht in diesem Ordner nach Testdateien. Erstellen Sie in diesem Ordner eine neue Datei mit dem Namen index.test.js.

Führen Sie zunächst die folgenden Importe durch.

importieren Heim aus"../src/pages/index";
importieren„@testing-library/jest-dom“;
importieren { fireEvent, render, screen, waitFor, act } aus„@testing-library/react“;

Schreiben Sie einen Test, um zu sehen, ob alle Elemente korrekt gerendert werden:

beschreiben(„Todo-App“, () => {
 Es(„rendert die Todo-App“, () => {
 machen(<Heim />);

 erwarten (screen.getByTestId(„Todo-Eingabe“)).toBeInTheDocument();
 erwarten (screen.getByTestId(„add-todo“)).toBeInTheDocument();
 });
});

Der Testfall überprüft, ob die To-Do-App und ihre Elemente korrekt gerendert werden. Im Testfall befindet sich die Heim Die Komponente wird mithilfe von gerendert machen Funktion aus der Testbibliothek.

Anschließend werden Aussagen mit dem gemacht erwarten Funktion, um sicherzustellen, dass bestimmte Elemente mit Test-IDs, wie z Todo-Eingabe sind in der gerenderten Ausgabe vorhanden. Wenn diese Elemente im DOM gefunden werden, ist der Test erfolgreich; andernfalls schlägt es fehl.

Führen Sie nun den folgenden Befehl aus, um den Test auszuführen.

npm-Lauftest

Wenn der Test erfolgreich ist, sollten Sie eine ähnliche Antwort sehen.

Testen verschiedener Aktionen und Simulieren von Fehlern

Beschreiben Sie diese Testfälle, um die Funktionalität der Funktionen „Aufgabe hinzufügen“ und „Aufgabe löschen“ zu überprüfen.

Schreiben Sie zunächst den Testfall für die Funktion „Aufgaben hinzufügen“.

 Es(„fügt eine Aufgabe hinzu“, asynchron () => {
 machen(<Heim />);

const todoInput = screen.getByTestId(„Todo-Eingabe“);
const addTodoButton = screen.getByTestId(„add-todo“);
const todoList = screen.getByTestId("Aufgabenliste");
erwarten Gesetz(asynchron () => {
 fireEvent.change (todoInput, { Ziel: { Wert: „Neues Todo“ } });
 addTodoButton.click();
 });
erwarten warten auf(() => {
 erwarten (todoList).toHaveTextContent(„Neues Todo“);
 });
 });

Der obige Codeausschnitt simuliert die Benutzerinteraktion, indem er etwas in ein Eingabefeld eingibt und auf die Schaltfläche „Hinzufügen“ klickt. Anschließend wird anhand eines Schein-To-Do-Eingabewerts überprüft, ob der Eingabewert erfolgreich zur To-Do-Liste hinzugefügt wurde.

Speichern Sie die Datei und überprüfen Sie das Terminal. Der Test sollte automatisch erneut ausgeführt und ähnliche Testergebnisse ausgeloggt werden.

Um einen Testfehler zu simulieren, ändern Sie die Test-ID der Schaltfläche „Hinzufügen“ und führen Sie den Test erneut aus. Mit diesem Update sollte der Test fehlschlagen und eine Fehlermeldung ausgegeben werden, die den spezifischen aufgetretenen Fehler angibt.

Idealerweise spielt das Testen in einer größeren Codebasis mit mehreren Mitwirkenden, die häufig Änderungen vornehmen, eine entscheidende Rolle bei der Identifizierung potenzieller Fehler, die zu Systemausfällen führen könnten. Durch Tests können Sie Inkonsistenzen wie die oben gezeigte leicht erkennen und während der Entwicklung beheben.

Schreiben Sie abschließend den Testfall für die Funktion „Aufgaben löschen“.

 Es(„löscht eine Aufgabe“, asynchron () => {
 machen(<Heim />);

const todoInput = screen.getByTestId(„Todo-Eingabe“);
const addTodoButton = screen.getByTestId(„add-todo“);

 fireEvent.change (todoInput, { Ziel: { Wert: „Alles 1“ } });
 fireEvent.click (addTodoButton);

const deleteTodoButton = screen.getByTestId(„delete-todo-0“);
 fireEvent.click (deleteTodoButton);

const todoList = screen.getByTestId("Aufgabenliste");
erwarten warten auf(() => {
 erwarten (todoList).toBeEmptyDOMElement();
 });
 });

Auch hier wird überprüft, ob die Aufgabe erfolgreich gelöscht wurde. Speichern Sie die Datei, um den Test auszuführen.

Unit-Tests mit Jest

Dieser Leitfaden vermittelt Ihnen das Wissen zum Schreiben und Ausführen einfacher Komponententests am Beispiel einer To-Do-Komponente. Um die Stabilität und Zuverlässigkeit der Kernfunktionen Ihrer Anwendung sicherzustellen und die Wahrscheinlichkeit von zu verringern Bei unerwarteten Problemen in Produktionsumgebungen ist es wichtig, dem Schreiben von Tests für Ihren Schlüssel Priorität einzuräumen Komponenten.

Darüber hinaus können Sie Ihren Testansatz durch die Einbeziehung von Snapshot-Tests und End-to-End-Tests verbessern.