Slik tester du Next.js-applikasjoner ved å bruke Jest

Hovedmålet med enhver utviklingsprosess er å bygge produksjonsklare applikasjoner. For å oppnå dette er det viktig å skrive kode som ikke bare oppfyller funksjonskravene, men som også forblir stabil og pålitelig over tid. Testing fungerer som en sikring, og sikrer at applikasjoner fungerer som forventet selv når nye oppdateringer blir gjort under utvikling.

Selv om det kan ta mye tid å skrive omfattende tester som omfatter ulike edge-tilfeller, hjelper det å flagge og løse problemer før de når produksjonsmiljøer.

Tester Next.js-applikasjoner

Å skrive tester er et viktig og ofte undervurdert aspekt ved utvikling av robuste applikasjoner. Det er lett å falle i fristelsen av å sende kode direkte til produksjon, og stole på troen på at "du har skrevet koden, så den må fungere!"

Denne tilnærmingen kan imidlertid føre til uforutsette problemer og feil i produksjonsmiljøer. Som et resultat kan bruk av en testdrevet utvikling (TDD)-tilnærming bidra til å maksimere din tillit til koden din og minimere tidsbruken

Hva er Jest?

Spøk er et populært testrammeverk som er mye brukt av forskjellige JavaScript-rammeverk. Den gir en rekke testfunksjoner som en kraftig testløper, automatisk hån og testing av øyeblikksbilder.

Ideelt sett kommer disse funksjonene til nytte for å oppnå omfattende testdekning og sikre påliteligheten til applikasjonen din på tvers av ulike typer tester.

Opprett en Next.js To-Do-applikasjon

La oss nå fordype oss i prosessen med å kjøre enhetstester på en Next.js-applikasjon ved hjelp av Jest. Men før du begynner, lag et Next.js-prosjekt og installer de nødvendige avhengighetene.

Følg disse trinnene for å komme i gang:

1. Opprett et nytt Next.js-prosjekt ved å kjøre følgende kommando i terminalen din:

   npx create-next-app@siste testveiledning

2. Etter å ha opprettet prosjektet, naviger inn i prosjektkatalogen ved å kjøre:

   cd nextjs-test-opplæring

3. Installer de nødvendige avhengighetene som avhengigheter ved å kjøre følgende kommando:

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

Med prosjektet satt opp, og avhengighetene installert, er du nå klar til å bygge Next.js-applikasjonen og skrive enhetstester ved hjelp av Jest.

Lag gjøremålskomponenten

I /src prosjektkatalogen, åpne pages/index.js fil, slett den eksisterende boilerplate Next.js-koden, og legg til følgende kode.

Foreta først følgende importer og definer to funksjoner som skal administrere brukeroppgaver: addTodo funksjon og slett Todo funksjon.

import { useState } fra"reagere";
import stiler fra"../styles/Home.module.css";
eksportmisligholdefunksjonHjem() {
konst [todos, setTodos] = brukState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
hvis (newTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (oppdatertTodos);
 sett NewTodo("");
 }
 };
konst deleteTodo = (indeks) => {
konst updatedTodos = [...todos];
 oppdatertTodos.splice (indeks, 1);
 setTodos (oppdatertTodos);
 };

Koden bruker useState krok for å initialisere og oppdatere tilstandsvariablene: todos og newTodo. De addTodo funksjonen legger til en ny gjøremål til gjøremålslisten når inngangsverdien ikke er tom, mens slett Todo funksjon fjerner en spesifikk gjøremål fra listen basert på indeksen.

Skriv nå koden for JSX-elementene som er gjengitt på nettleserens DOM.

komme tilbake (


 type="tekst"
 className={styles.input}
 verdi={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"legg til gjøremål">
 Legg til Todo
 </button>
"gjøremålsliste">
 {todos.map((gjøremål, indeks) => (


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


 onClick={() => deleteTodo (indeks)}
 className={styles.button}
 data-testid={`slette-oppgave-${indeks}`}
 >
 Slett
 </button>
 </div>
 ))}
 </div>
 );}

Skrive testsaker

Før du begynner å skrive testsaker, er det avgjørende å konfigurere Jest i henhold til dine spesifikke testkrav. Dette innebærer å lage og tilpasse jest.config.js fil, som fungerer som grunnlaget for testoppsettet ditt.

Opprett en ny i rotkatalogen jest.config.js fil. Deretter legger du til følgende kode for å konfigurere Jest tilsvarende:

konst nextJest = krever("neste/spøk");
konst createJestConfig = nextJest({
 dir: "./",
});
konst customJestConfig = {
 modulkataloger: ["node_modules", "/"],
 test miljø: "jest-environment-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Til slutt åpner du package.json fil og legg til et nytt skript kalt test som vil utføre kommandoen spøk --watchAll å kjøre alle testsakene og se etter eventuelle endringer.

Etter å ha gjort oppdateringen, skal skriptene dine se slik ut:

"skript": {
"utvikler": "neste utvikler",
"bygge": "neste bygg",
"start": "neste start",
"lo": "neste lo",
"test": "spøk --watchAll"
 },

Med konfigurasjonene på plass, fortsett med å skrive og utføre tester.

Tester Next.js To-Do-appen med Jest

I prosjektets rotkatalog oppretter du en ny mappe kalt __tester__. Jest vil slå opp testfiler i denne mappen. Inne i denne mappen oppretter du en ny fil som heter index.test.js.

Foreta først følgende importer.

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

Skriv en test for å se om alle elementene gjengis riktig:

beskrive("Todo App", () => {
 den("gjengir todo-appen", () => {
 gjengi (<Hjem />);

 forventer (screen.getByTestId("todo-input")).toBeInTheDocument();
 forventer (screen.getByTestId("legg til gjøremål")).toBeInTheDocument();
 });
});

Testtilfellet bekrefter at To-Do-appen og dens elementer gjengis riktig. Inne i testsaken er Hjem komponenten gjengis ved hjelp av gjengi funksjon fra testbiblioteket.

Deretter gjøres påstander ved å bruke forvente funksjon for å sikre at spesifikke elementer med test-IDer, som f.eks todo-inngang finnes i den gjengitte utgangen. Hvis disse elementene er funnet i DOM, består testen; ellers mislykkes det.

Kjør nå følgende kommando for å utføre testen.

npm kjøre test

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

Testing av ulike handlinger og simulering av feil

Beskriv disse testtilfellene for å bekrefte funksjonaliteten til funksjonene Legg til gjøremål og slett gjøremål.

Begynn med å skrive testsaken for Add To Do-funksjonaliteten.

 den("legger til en gjøremål", asynkron () => {
 gjengi (<Hjem />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("legg til gjøremål");
konst todoList = screen.getByTestId("gjøremålsliste");
avvente handling(asynkron () => {
 fireEvent.change (todoInput, { mål: { verdi: "Ny gjøremål" } });
 addTodoButton.click();
 });
avvente vent for(() => {
 forventer (todoList).toHaveTextContent("Ny gjøremål");
 });
 });

Kodebiten ovenfor simulerer brukerinteraksjon ved å skrive inn i et inndatafelt og klikke på legg til-knappen. Deretter, ved hjelp av en falsk To-Do-inndataverdi, verifiserer den om inndataverdien er lagt til i To-Do-listen.

Lagre filen og sjekk terminalen. Testen skal automatisk kjøres på nytt og logge ut lignende testresultater.

For å simulere en testfeil, endre test-ID-en for legg til knappen og kjør testen på nytt. Med denne oppdateringen skal testen mislykkes og logge ut en feilmelding som indikerer den spesifikke feilen som oppstod.

Ideelt sett, i en større kodebase med flere bidragsytere som gjør hyppige endringer, spiller testing en avgjørende rolle for å identifisere potensielle feil som kan føre til systemfeil. Ved å teste kan du enkelt flagge inkonsekvenser, slik som den som er vist ovenfor, og løse dem under utvikling.

Skriv til slutt testsaken for Slett To-Do-funksjonaliteten.

 den("sletter en gjøremål", asynkron () => {
 gjengi (<Hjem />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("legg til gjøremål");

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

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

konst todoList = screen.getByTestId("gjøremålsliste");
avvente vent for(() => {
 forvente (todoList).toBeEmptyDOMElement();
 });
 });

Igjen, det bekrefter om gjøremålet er slettet. Lagre filen for å utføre testen.

Enhetstesting med Jest

Denne veiledningen har gitt deg kunnskapen til å skrive og utføre enkle enhetstester, med en To-Do-komponent som eksempel. For å sikre stabiliteten og påliteligheten til applikasjonens kjernefunksjoner og redusere sjansene for uventede problemer i produksjonsmiljøer, er det viktig å prioritere å skrive tester for nøkkelen din komponenter.

Videre kan du forbedre testmetoden din ved å inkludere øyeblikksbildetester og ende-til-ende-tester.