Hur man testar Next.js-applikationer med Jest

Det primära syftet med alla utvecklingsprocesser är att bygga produktionsfärdiga applikationer. För att uppnå detta är det viktigt att skriva kod som inte bara uppfyller funktionskraven utan även förblir stabil och pålitlig över tid. Testning fungerar som ett skydd och säkerställer att applikationer fungerar som förväntat även när nya uppdateringar görs under utvecklingen.

Även om det kan ta avsevärd tid att skriva omfattande tester som omfattar olika kantfall, hjälper det att flagga och lösa problem innan de når produktionsmiljöer.

Testar Next.js-applikationer

Att skriva tester är en viktig och ofta underskattad aspekt av att utveckla robusta applikationer. Det är lätt att falla in i frestelsen att skicka koden direkt till produktion, förlita sig på tron ​​att "du skrev koden, så det måste fungera!"

Detta tillvägagångssätt kan dock leda till oförutsedda problem och buggar i produktionsmiljöer. Som ett resultat kan en testdriven utvecklingsmetod (TDD) hjälpa till att maximera ditt förtroende för din kod och minimera den tid som spenderas

Vad är skämt?

Skoj är ett populärt testramverk som används flitigt av olika JavaScript-ramverk. Den tillhandahåller en uppsättning testfunktioner som en kraftfull testlöpare, automatisk hån och ögonblicksbildstestning.

Helst kommer dessa funktioner väl till pass för att uppnå omfattande testtäckning och säkerställa tillförlitligheten hos din applikation överallt olika typer av tester.

Skapa en Next.js Att göra-applikation

Låt oss nu fördjupa oss i processen att köra enhetstester på en Next.js-applikation med Jest. Men innan du börjar, skapa ett Next.js-projekt och installera de nödvändiga beroenden.

Följ dessa steg för att komma igång:

1. Skapa ett nytt Next.js-projekt genom att köra följande kommando i din terminal:

   npx create-next-app@senaste test-tutorial

2. När du har skapat projektet, navigera in i projektkatalogen genom att köra:

   cd nextjs-test-tutorial

3. Installera nödvändiga beroenden som beroenden genom att köra följande kommando:

   npm installera npm installera --save-dev skämt @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Med projektet uppsatt och beroenden installerade är du nu redo att bygga Next.js-applikationen och skriva enhetstester med Jest.

Skapa Att göra-komponenten

I den /src projektkatalog, öppna pages/index.js fil, radera den befintliga koden Next.js och lägg till följande kod.

Gör först följande importer och definiera två funktioner som hanterar användaruppgifter: addTodo funktion och radera Todo fungera.

importera { useState } från"reagera";
importera stilar från"../styles/Home.module.css";
exporterastandardfungeraHem() {
konst [todos, setTodos] = useState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
om (newTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (updatedTodos);
 setNewTodo("");
 }
 };
konst raderaTodo = (index) => {
konst updatedTodos = [...todos];
 uppdateradTodos.splice (index, 1);
 setTodos (updatedTodos);
 };

Koden använder useState krok för att initiera och uppdatera tillståndsvariablerna: todos och newTodo. De addTodo funktionen lägger till en ny Att göra till listan att göra när inmatningsvärdet inte är tomt, medan radera Todo funktionen tar bort en specifik Att göra från listan baserat på dess index.

Skriv nu koden för JSX-elementen som återges på webbläsarens DOM.

lämna tillbaka (


 typ="text"
 className={styles.input}
 värde={newTodo}
 data-testid="att göra-ingång"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"lägg till att göra">
 Lägg till Todo
 </button>
"att göra lista">
 {todos.map((göra, indexera) => (


 {att göra}
 </li>
 ))}
 </ul>
 {todos.map((göra, indexera) => (


 onClick={() => deleteTodo (index)}
 className={styles.button}
 data-testid={`radera-att göra-${index}`}
 >
 Radera
 </button>
 </div>
 ))}
 </div>
 );}

Att skriva testfall

Innan du börjar skriva testfall är det avgörande att konfigurera Jest enligt dina specifika testkrav. Detta innebär att skapa och anpassa jest.config.js fil, som fungerar som grunden för din testinställning.

Skapa en ny i rotkatalogen jest.config.js fil. Lägg sedan till följande kod för att konfigurera Jest därefter:

konst nextJest = behöva("nästa/skämt");
konst createJestConfig = nextJest({
 dir: "./",
});
konst customJestConfig = {
 modulkataloger: ["nodmoduler", "/"],
 testmiljö: "skämt-miljö-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Öppna slutligen package.json fil och lägg till ett nytt skript som heter testa som kommer att utföra kommandot skämt --watchAll för att köra alla testfall och se efter eventuella ändringar.

Efter att ha gjort uppdateringen bör dina skript se ut så här:

"skript": {
"dev": "nästa utvecklare",
"bygga": "nästa bygg",
"Start": "nästa start",
"ludd": "nästa ludd",
"testa": "skämt --watchAll"
 },

Med konfigurationerna på plats, fortsätt med att skriva och köra tester.

Testar Next.js Att göra-appen med Jest

Skapa en ny mapp som heter i projektets rotkatalog __test__. Jest kommer att leta upp testfiler i den här mappen. Inuti den här mappen skapar du en ny fil som heter index.test.js.

Gör först följande importer.

importera Hem från"../src/pages/index";
importera"@testing-library/jest-dom";
importera { fireEvent, render, screen, waitFor, act } från"@test-bibliotek/reagera";

Skriv ett test för att se om alla element återges korrekt:

beskriva("Todo-appen", () => {
 Det("renderar todo-appen", () => {
 framställa(<Hem />);

 förvänta (screen.getByTestId("att göra-ingång")).toBeInTheDocument();
 förvänta (screen.getByTestId("lägg till att göra")).toBeInTheDocument();
 });
});

Testfallet verifierar att Att göra-appen och dess element återges korrekt. Inuti testfallet, den Hem komponenten renderas med hjälp av framställa funktion från testbiblioteket.

Sedan görs påståenden med hjälp av förvänta funktion för att säkerställa att specifika element med test-ID, som t.ex att göra-ingång finns i den renderade utmatningen. Om dessa element hittas i DOM, godkänns testet; annars misslyckas det.

Kör nu följande kommando för att köra testet.

npm körtest

Du bör se ett liknande svar om testet godkänns.

Testa olika åtgärder och simulera fel

Beskriv dessa testfall för att verifiera funktionen hos funktionerna Lägg till att göra och Ta bort att göra.

Börja med att skriva testfallet för Add To-Do-funktionen.

 Det("lägger till en uppgift", asynkron () => {
 framställa(<Hem />);

konst todoInput = screen.getByTestId("att göra-ingång");
konst addTodoButton = screen.getByTestId("lägg till att göra");
konst todoList = screen.getByTestId("att göra lista");
vänta spela teater(asynkron () => {
 fireEvent.change (todoInput, { mål: { värde: "Ny uppgift" } });
 addTodoButton.click();
 });
vänta vänta på(() => {
 förvänta (todoList).toHaveTextContent("Ny uppgift");
 });
 });

Kodavsnittet ovan simulerar användarinteraktion genom att skriva i ett inmatningsfält och klicka på knappen Lägg till. Sedan, med hjälp av ett skenbart att göra-inmatningsvärde, verifierar det om inmatningsvärdet har lagts till på att-göra-listan.

Spara filen och kontrollera terminalen. Testet bör automatiskt köras om och logga ut liknande testresultat.

För att simulera ett testfel, ändra test-ID: t för knappen Lägg till och kör testet igen. Med den här uppdateringen bör testet misslyckas och logga ut ett felmeddelande som anger det specifika felet som påträffades.

Helst, i en större kodbas med flera bidragsgivare som gör frekventa ändringar, spelar testning en avgörande roll för att identifiera potentiella buggar som kan leda till systemfel. Genom att testa kan du enkelt flagga inkonsekvenser, som den som visas ovan, och lösa dem under utvecklingen.

Skriv slutligen testfallet för funktionen Ta bort att göra.

 Det("tar bort en uppgift", asynkron () => {
 framställa(<Hem />);

konst todoInput = screen.getByTestId("att göra-ingång");
konst addTodoButton = screen.getByTestId("lägg till att göra");

 fireEvent.change (todoInput, { mål: { värde: "Att göra 1" } });
 fireEvent.click (addTodoButton);

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

konst todoList = screen.getByTestId("att göra lista");
vänta vänta på(() => {
 förvänta (todoList).toBeEmptyDOMElement();
 });
 });

Återigen verifierar den om Att göra-målet har tagits bort. Spara filen för att utföra testet.

Enhetstestning med hjälp av Jest

Den här guiden har gett dig kunskapen att skriva och utföra enkla enhetstester, med hjälp av en Att göra-komponent som exempel. För att säkerställa stabiliteten och tillförlitligheten för din applikations kärnfunktioner och minska chanserna för oväntade problem i produktionsmiljöer är det viktigt att prioritera att skriva tester för din nyckel komponenter.

Dessutom kan du förbättra din testmetod genom att införliva ögonblicksbildstester och end-to-end-tester.