Kuidas testida Next.js-i rakendusi Jesti abil

Iga arendusprotsessi peamine eesmärk on luua tootmisvalmis rakendusi. Selle saavutamiseks on oluline kirjutada kood, mis mitte ainult ei täida funktsionaalseid nõudeid, vaid jääb ka aja jooksul stabiilseks ja usaldusväärseks. Testimine toimib kaitsena, tagades, et rakendused toimivad ootuspäraselt isegi siis, kui arenduse käigus tehakse uusi värskendusi.

Kuigi laiaulatuslike testide kirjutamine, mis hõlmavad erinevaid servajuhtumeid, võib võtta palju aega, aitab see probleeme märgistada ja lahendada enne, kui need jõuavad tootmiskeskkondadesse.

Next.js rakenduste testimine

Testide kirjutamine on tugevate rakenduste arendamise oluline ja sageli alahinnatud aspekt. Lihtne on sattuda kiusatusse saata kood otse tootmisse, toetudes veendumusele, et "te kirjutasite koodi, nii et see peab töötama!"

Selline lähenemine võib aga tootmiskeskkondades põhjustada ettenägematuid probleeme ja vigu. Selle tulemusel võib testipõhise arenduse (TDD) lähenemine aidata suurendada teie usaldust koodi vastu ja minimeerida ajakulu.

Mis on Jest?

Naljakas on populaarne testimisraamistik, mida kasutavad laialdaselt erinevad JavaScripti raamistikud. See pakub testimisfunktsioonide komplekti, nagu võimas testimisfunktsioon, automaatne pilkamine ja hetktõmmiste testimine.

Ideaalis on need funktsioonid kasulikud, et saavutada laiaulatuslik testide katvus ja tagada teie rakenduse usaldusväärsus kogu maailmas. erinevat tüüpi testid.

Looge rakendus Next.js To-Do

Nüüd süveneme rakenduse Next.js ühikutestide käitamise protsessi Jesti abil. Enne alustamist looge aga projekt Next.js ja installige vajalikud sõltuvused.

Alustamiseks toimige järgmiselt.

1. Looge uus Next.js projekt, käivitades terminalis järgmise käsu:

   npx create-next-app@latest test-õpetus

2. Pärast projekti loomist liikuge projekti kataloogi, käivitades:

   cd nextjs-test-tutorial

3. Installige vajalikud sõltuvused as devSõltuvused käivitades järgmise käsu:

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

Kui projekt on seadistatud ja sõltuvused on installitud, olete nüüd valmis ehitama rakendust Next.js ja kirjutama Jesti abil üksuseteste.

Looge ülesannete komponent

Aastal /src projekti kataloog, avage pages/index.js kustutage olemasolev kood Next.js ja lisage järgmine kood.

Esmalt tehke järgmised impordid ja määrake kaks funktsiooni, mis haldavad kasutaja ülesandeid: addTodo funktsioon ja KustutaTodo funktsiooni.

importida { useState } alates"reageerida";
importida stiilid alates"../styles/Home.module.css";
eksportidavaikimisifunktsiooniKodu() {
konst [todos, setTodos] = useState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
kui (uusTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (uuendatudTodos);
 setNewTodo("");
 }
 };
konst deleteTodo = (indeks) => {
konst updatedTodos = [...todos];
 updatedTodos.splice (indeks, 1);
 setTodos (uuendatudTodos);
 };

Kood kasutab useState konks olekumuutujate lähtestamiseks ja värskendamiseks: todos ja uusTodo. The addTodo funktsioon lisab ülesannete loendisse uue ülesande, kui sisendväärtus ei ole tühi, samas kui KustutaTodo funktsioon eemaldab loendist konkreetse ülesande selle indeksi alusel.

Nüüd kirjutage brauseri DOM-is renderdatud JSX-elementide kood.

tagasi (


 tüüp="tekst"
 className={styles.input}
 value={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"lisa-ülesanne">
 Lisa Todo
 </button>
"nimekiri">
 {todos.map((teha, indeks) => (


 {tegema}
 </li>
 ))}
 </ul>
 {todos.map((teha, indeks) => (


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

Testijuhtumite kirjutamine

Enne testjuhtumite kirjutamise alustamist on ülioluline konfigureerida Jest vastavalt teie konkreetsetele testimisnõuetele. See hõlmab loomist ja kohandamist jest.config.js faili, mis on teie testimise seadistuse aluseks.

Loo juurkataloogis uus jest.config.js faili. Seejärel lisage Jesti vastavalt konfigureerimiseks järgmine kood:

konst nextJest = nõuda("järgmine/nali");
konst createJestConfig = nextJest({
 rež: "./",
});
konst customJestConfig = {
 moduleDirectories: ["sõlme_moodulid", "/"],
 testkeskkond: "jest-environment-jsdom",
};
moodul.exports = createJestConfig (customJestConfig);

Lõpuks avage package.json faili ja lisage uus skript nimega test mis täidab käsu nali -- vaata kõike kõigi testjuhtumite käivitamiseks ja muudatuste jälgimiseks.

Pärast värskenduse tegemist peaksid teie skriptid välja nägema järgmised:

"skriptid": {
"dev": "järgmine arendaja",
"ehitada": "järgmine ehitamine",
"alusta": "järgmine algus",
"kibe": "järgmine lint",
"test": "nali -- vaata kõike"
 },

Kui konfiguratsioonid on paigas, jätkake testide kirjutamist ja sooritamist.

Rakenduse Next.js To-Do testimine Jestiga

Looge projekti juurkataloogis uus kaust nimega __testid__. Jest otsib sellest kaustast testfaile. Looge selle kausta sees uus fail nimega index.test.js.

Esmalt tehke järgmised impordid.

importida Kodu alates"../src/pages/index";
importida"@testing-library/jest-dom";
importida { fireEvent, render, screen, waitFor, act } alates"@testing-library/react";

Kirjutage test, et näha, kas kõik elemendid renderdatakse õigesti:

kirjelda ("Todo rakendus", () => {
 see ("renderdab rakendust Todo", () => {
 render (<Kodu />);

 oodata (screen.getByTestId("todo-input")).toBeInTheDocument();
 oodata (screen.getByTestId("lisa-ülesanne")).toBeInTheDocument();
 });
});

Testjuhtum kontrollib, kas rakendus To-Do ja selle elemendid renderdatakse õigesti. Katsekasti sees on Kodu komponent renderdatakse kasutades renderdama funktsiooni testimise teegist.

Seejärel esitatakse väited, kasutades oodata funktsioon tagamaks, et testi ID-dega konkreetsed elemendid, nt todo-sisend on renderdatud väljundis olemas. Kui need elemendid leitakse DOM-ist, läheb test läbi; muidu see ebaõnnestub.

Nüüd käivitage testi käivitamiseks järgmine käsk.

npm töökatse

Kui test läbib, peaksite nägema sarnast vastust.

Erinevate toimingute testimine ja vigade simuleerimine

Kirjeldage neid testjuhtumeid, et kontrollida funktsioonide Lisa ülesanne ja Kustuta ülesanne funktsionaalsust.

Alustuseks kirjutage funktsiooni Lisa ülesanne testjuhtum.

 see ("lisab ülesande", asünkr () => {
 render (<Kodu />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("lisa-ülesanne");
konst todoList = screen.getByTestId("nimekiri");
ootama tegutsema (asünkr () => {
 fireEvent.change (todoInput, { sihtmärk: { väärtus: "Uus ülesanne" } });
 addTodoButton.click();
 });
ootama ootama(() => {
 oodata (todoList).toHaveTextContent("Uus ülesanne");
 });
 });

Ülaltoodud koodilõik simuleerib kasutaja interaktsiooni, tippides sisestusväljale ja klõpsates lisamisnupul. Seejärel kontrollib see näidisülesannete sisendväärtuse abil, kas sisendväärtus lisati edukalt ülesannete loendisse.

Salvestage fail ja kontrollige terminali. Test peaks automaatselt uuesti läbi käima ja sarnased testitulemused välja logima.

Testivea simuleerimiseks muutke lisamisnupu testi ID-d ja käivitage test uuesti. Selle värskenduse korral peaks test ebaõnnestuma ja välja logima veateate, mis näitab konkreetset ilmnenud viga.

Ideaalis mängib testimine suuremas koodibaasis, kus mitu panustajat teevad sageli muudatusi, otsustavat rolli võimalike vigade tuvastamisel, mis võivad põhjustada süsteemitõrkeid. Testimise abil saate hõlpsasti märgistada ebakõlad, nagu ülaltoodud, ja need arenduse käigus lahendada.

Lõpuks kirjutage ülesannete kustutamise funktsiooni testjuhtum.

 see ("kustutab ülesande", asünkr () => {
 render (<Kodu />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("lisa-ülesanne");

 fireEvent.change (todoInput, { sihtmärk: { väärtus: "Todo 1" } });
 fireEvent.click (addTodoButton);

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

konst todoList = screen.getByTestId("nimekiri");
ootama ootama(() => {
 oodata (todoList).toBeEmptyDOMElement();
 });
 });

Jällegi kontrollib see, kas ülesanne on edukalt kustutatud. Testi läbiviimiseks salvestage fail.

Ühiku testimine Jesti abil

See juhend on andnud teile teadmised lihtsate ühikutestide kirjutamiseks ja läbiviimiseks, kasutades näiteks ülesannete komponenti. Et tagada oma rakenduse põhifunktsioonide stabiilsus ja töökindlus ning vähendada võimalusi ootamatute probleemide korral tootmiskeskkondades, on oluline seada oma võtme jaoks testide kirjutamine prioriteediks komponendid.

Lisaks saate täiustada oma testimismeetodit, lisades hetktõmmistetestid ja täielikud testid.