Sådan testes Next.js-applikationer ved hjælp af Jest

Det primære formål med enhver udviklingsproces er at bygge produktionsklare applikationer. For at opnå dette er det vigtigt at skrive kode, der ikke kun opfylder de funktionelle krav, men også forbliver stabil og pålidelig over tid. Test tjener som en sikring, der sikrer, at applikationer fungerer som forventet, selv når der laves nye opdateringer under udvikling.

Selvom det kan tage lang tid at skrive omfattende test, der omfatter forskellige edge cases, hjælper det med at markere og løse problemer, før de når produktionsmiljøer.

Test af Next.js-applikationer

At skrive test er et væsentligt og ofte undervurderet aspekt ved udvikling af robuste applikationer. Det er let at falde i fristelsen til at sende kode direkte til produktion, idet man stoler på troen på, at "du har skrevet koden, så den skal virke!"

Denne tilgang kan dog føre til uforudsete problemer og fejl i produktionsmiljøer. Som et resultat kan anvendelse af en testdrevet udviklingstilgang (TDD) hjælpe med at maksimere din tillid til din kode og minimere tidsforbruget

Hvad er Jest?

Spøg er en populær testramme, der er meget brugt af forskellige JavaScript rammer. Det giver en række testfunktioner såsom en kraftfuld testløber, automatisk mocking og snapshottest.

Ideelt set er disse funktioner nyttige til at opnå omfattende testdækning og sikre pålideligheden af ​​din applikation på tværs forskellige typer test.

Opret en Next.js To-Do-applikation

Lad os nu dykke ned i processen med at køre enhedstests på en Next.js-applikation ved hjælp af Jest. Men før du begynder, skal du oprette et Next.js-projekt og installere de nødvendige afhængigheder.

Følg disse trin for at komme i gang:

1. Opret et nyt Next.js-projekt ved at køre følgende kommando i din terminal:

   npx create-next-app@seneste test-tutorial

2. Når du har oprettet projektet, skal du navigere ind i projektbiblioteket ved at køre:

   cd nextjs-test-tutorial

3. Installer de nødvendige afhængigheder som afhængigheder ved at køre følgende kommando:

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

Med projektet sat op, og afhængighederne installeret, er du nu klar til at bygge Next.js-applikationen og skrive enhedstest ved hjælp af Jest.

Opret To-Do-komponenten

I /src projektmappe, skal du åbne sider/indeks.js fil, slet den eksisterende boilerplate Next.js-kode og tilføj følgende kode.

Foretag først følgende importer og definer to funktioner, der administrerer brugernes To-Dos: addTodo funktion og slet Todo fungere.

importere { useState } fra"reagere";
importere stilarter fra"../styles/Home.module.css";
eksportStandardfungereHjem() {
konst [todos, setTodos] = useState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
hvis (newTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (opdateretTodos);
 sætNyTodo("");
 }
 };
konst sletTodo = (indeks) => {
konst updatedTodos = [...todos];
 opdateretTodos.splice (indeks, 1);
 setTodos (opdateretTodos);
 };

Koden bruger useState krog for at initialisere og opdatere tilstandsvariablerne: todos og newTodo. Det addTodo funktionen tilføjer en ny To-Do til todos-listen, når inputværdien ikke er tom, mens slet Todo funktionen fjerner en specifik opgave fra listen baseret på dets indeks.

Skriv nu koden for JSX-elementerne, der gengives på browserens DOM.

Vend tilbage (


 type="tekst"
 className={styles.input}
 værdi={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"add-todo">
 Tilføj Todo
 </button>
"todo-liste">
 {todos.map((gøremål, indeks) => (


 {at gøre}
 </li>
 ))}
 </ul>
 {todos.map((gøremål, indeks) => (


 onClick={() => deleteTodo (indeks)}
 className={styles.button}
 data-testid={`slet-todo-${indeks}`}
 >
 Slet
 </button>
 </div>
 ))}
 </div>
 );}

At skrive testcases

Før du begynder at skrive testcases, er det afgørende at konfigurere Jest i henhold til dine specifikke testkrav. Dette involverer oprettelse og tilpasning af jest.config.js fil, som fungerer som grundlaget for din testopsætning.

I rodmappen skal du oprette en ny jest.config.js fil. Tilføj derefter følgende kode for at konfigurere Jest i overensstemmelse hermed:

konst nextJest = kræve("næste/spøg");
konst createJestConfig = nextJest({
 dir: "./",
});
konst customJestConfig = {
 modulkataloger: ["node_modules", "/"],
 testmiljø: "jost-miljø-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Åbn endelig package.json fil og tilføje et nyt script kaldet prøve som vil udføre kommandoen spøg --watchAll at køre alle testcases og holde øje med eventuelle ændringer.

Efter opdateringen skal dine scripts se sådan ud:

"scripts": {
"dev": "næste udvikler",
"bygge": "næste bygning",
"Start": "næste start",
"fnug": "næste fnug",
"prøve": "jost --watchAll"
 },

Med konfigurationerne på plads, fortsæt med at skrive og udføre tests.

Test af Next.js To-Do-appen med Jest

I projektets rodmappe skal du oprette en ny mappe kaldet __prøver__. Jest vil slå testfiler op i denne mappe. Inde i denne mappe skal du oprette en ny fil kaldet index.test.js.

Foretag først følgende importer.

importere Hjem fra"../src/pages/index";
importere"@testing-bibliotek/jest-dom";
importere { fireEvent, render, screen, waitFor, act } fra"@test-bibliotek/reager";

Skriv en test for at se, om alle elementerne gengives korrekt:

beskrive("Todo App", () => {
 det("gengiver todo-appen", () => {
 render (<Hjem />);

 forventer (screen.getByTestId("todo-input")).toBeInTheDocument();
 forventer (screen.getByTestId("add-todo")).toBeInTheDocument();
 });
});

Testcasen verificerer, at To-Do-appen og dens elementer gengives korrekt. Inde i testsagen er Hjem komponent gengives ved hjælp af gengive funktion fra testbiblioteket.

Derefter fremsættes påstande ved hjælp af forventer funktion for at sikre, at specifikke elementer med test-id'er, som f.eks todo-input er til stede i det gengivne output. Hvis disse elementer findes i DOM, består testen; ellers mislykkes det.

Kør nu følgende kommando for at udføre testen.

npm køre test

Du bør se et lignende svar, hvis testen består.

Test af forskellige handlinger og simulering af fejl

Beskriv disse testcases for at verificere funktionaliteten af ​​funktionerne Tilføj To-Do og Slet To-Do.

Start med at skrive testcasen for Tilføj To-Do-funktionen.

 det("tilføjer en opgave", asynkron () => {
 render (<Hjem />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("add-todo");
konst todoList = screen.getByTestId("todo-liste");
vente handling(asynkron () => {
 fireEvent.change (todoInput, { mål: { værdi: "Ny opgave" } });
 addTodoButton.click();
 });
vente vent på(() => {
 forventer (todoList).toHaveTextContent("Ny opgave");
 });
 });

Kodestykket ovenfor simulerer brugerinteraktion ved at skrive i et inputfelt og klikke på knappen Tilføj. Derefter, ved hjælp af en falsk To-Do-inputværdi, verificerer den, om inputværdien er blevet tilføjet til To-Do-listen.

Gem filen og tjek terminalen. Testen skal automatisk køre igen og logge lignende testresultater ud.

For at simulere en testfejl skal du ændre tilføj knappens test-id og køre testen igen. Med denne opdatering skulle testen mislykkes og logge ud af en fejlmeddelelse, der angiver den specifikke fejl, der er stødt på.

Ideelt set, i en større kodebase med flere bidragydere, der foretager hyppige ændringer, spiller test en afgørende rolle i at identificere potentielle fejl, der kan føre til systemfejl. Ved at teste kan du nemt markere uoverensstemmelser, såsom den, der er vist ovenfor, og løse dem under udvikling.

Skriv endelig testcasen for Slet To-Do-funktionen.

 det("sletter en opgave", asynkron () => {
 render (<Hjem />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("add-todo");

 fireEvent.change (todoInput, { mål: { værdi: "Todo 1" } });
 fireEvent.click (addTodoButton);

konst deleteTodoButton = screen.getByTestId("delete-todo-0");
 fireEvent.click (deleteTodoButton);

konst todoList = screen.getByTestId("todo-liste");
vente vent på(() => {
 forventer (todoList).toBeEmptyDOMElement();
 });
 });

Igen bekræfter det, om opgaven er slettet. Gem filen for at udføre testen.

Enhedstest ved hjælp af Jest

Denne vejledning har givet dig viden til at skrive og udføre simple enhedstests med en To-Do-komponent som eksempel. For at sikre stabiliteten og pålideligheden af ​​din applikations kernefunktioner og reducere chancerne for uventede problemer i produktionsmiljøer, er det vigtigt at prioritere at skrive test til din nøgle komponenter.

Ydermere kan du forbedre din testmetode ved at inkorporere snapshot-tests og ende-til-ende-tests.