Kako preizkusiti aplikacije Next.js z uporabo Jest

Glavni cilj vsakega razvojnega procesa je izdelava aplikacij, pripravljenih za proizvodnjo. Da bi to dosegli, je bistveno napisati kodo, ki ne le izpolnjuje funkcionalne zahteve, ampak tudi ostane stabilna in zanesljiva skozi čas. Testiranje služi kot zaščita, ki zagotavlja, da aplikacije delujejo po pričakovanjih, tudi če so med razvojem narejene nove posodobitve.

Medtem ko lahko pisanje obsežnih testov, ki zajemajo različne robne primere, traja precej časa, pomaga označiti in razrešiti težave, preden dosežejo produkcijska okolja.

Testiranje aplikacij Next.js

Pisanje testov je bistven in pogosto podcenjen vidik razvoja robustnih aplikacij. Preprosto je pasti v skušnjavo pošiljanja kode neposredno v proizvodnjo, pri čemer se zanašate na prepričanje, da "ste vi avtor kode, zato mora delovati!"

Vendar lahko ta pristop privede do nepredvidenih težav in napak v produkcijskih okoljih. Posledično lahko sprejetje pristopa razvoja na podlagi testiranja (TDD) pomaga povečati vaše zaupanje v kodo in zmanjšati porabljen čas

Kaj je Jest?

Šala je priljubljeno ogrodje za testiranje, ki ga pogosto uporabljajo različni ogrodje JavaScript. Zagotavlja nabor funkcij za testiranje, kot je zmogljiv izvajalec preizkusov, samodejno zasmehovanje in testiranje posnetkov.

V idealnem primeru te funkcije pridejo prav pri doseganju celovite pokritosti testov in zagotavljanju zanesljivosti vaše aplikacije v različne vrste testov.

Ustvarite aplikacijo Next.js To-Do

Zdaj pa se poglobimo v postopek izvajanja testov enote v aplikaciji Next.js z uporabo Jesta. Vendar preden začnete, ustvarite projekt Next.js in namestite zahtevane odvisnosti.

Za začetek sledite tem korakom:

1. Ustvarite nov projekt Next.js tako, da v terminalu zaženete naslednji ukaz:

   npx create-next-app@najnovejša testna vadnica

2. Ko ustvarite projekt, se pomaknite v imenik projekta tako, da zaženete:

   cd nextjs-test-tutorial

3. Namestite potrebne odvisnosti kot devDependencies z izvajanjem naslednjega ukaza:

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

Z nastavljenim projektom in nameščenimi odvisnostmi ste zdaj pripravljeni na izgradnjo aplikacije Next.js in pisanje testov enot z uporabo Jesta.

Ustvarite komponento To-Do

V /src imenik projekta, odprite pages/index.js datoteko, izbrišite obstoječo predlogo kode Next.js in dodajte naslednjo kodo.

Najprej izvedite naslednje uvoze in definirajte dve funkciji, ki bosta upravljali uporabniška opravila: addTodo funkcijo in deleteTodo funkcijo.

uvoz {useState} od"reagirati";
uvoz stilov od"../styles/Home.module.css";
izvozprivzetofunkcijodomov() {
konst [todos, setTodos] = useState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
če (newTodo.trim() !== "") {
konst posodobljena opravila = [... opravila, nova opravila];
 setTodos (updatedTodos);
 setNewTodo("");
 }
 };
konst deleteTodo = (kazalo) => {
konst posodobljenoTodos = [...todos];
 posodobljenTodos.splice (indeks, 1);
 setTodos (updatedTodos);
 };

Koda uporablja useState kavelj za inicializacijo in posodobitev spremenljivk stanja: todos in novoTodo. The addTodo funkcija doda novo opravilo na seznam opravil, ko vhodna vrednost ni prazna, medtem ko je deleteTodo funkcija odstrani določeno opravilo s seznama na podlagi njegovega indeksa.

Zdaj napišite kodo za elemente JSX, upodobljene v DOM brskalnika.

vrnitev (


 vrsta="besedilo"
 className={styles.input}
 value={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"dodaj opravilo">
 Dodaj Todo
 </button>
"seznam opravil">
 {todos.map((todo, indeks) => (


 {narediti}
 </li>
 ))}
 </ul>
 {todos.map((todo, indeks) => (


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

Pisanje testnih primerov

Preden začnete pisati testne primere, je ključnega pomena, da konfigurirate Jest v skladu z vašimi posebnimi zahtevami glede testiranja. To vključuje ustvarjanje in prilagajanje jest.config.js datoteko, ki služi kot osnova za vašo nastavitev testiranja.

V korenskem imeniku ustvarite nov jest.config.js mapa. Nato dodajte naslednjo kodo, da ustrezno konfigurirate Jest:

konst nextJest = zahtevati("naslednji/šala");
konst createJestConfig = nextJest({
 dir: "./",
});
konst customJestConfig = {
 moduleDirectories: ["node_modules", "/"],
 preizkusno okolje: "jest-environment-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Končno odprite package.json datoteko in dodajte nov skript, imenovan test ki bo izvršil ukaz šala --watchAll za izvajanje vseh testnih primerov in opazovanje morebitnih sprememb.

Po izvedbi posodobitve bi morali biti vaši skripti videti takole:

"skripte": {
"dev": "naslednji razvijalec",
"zgraditi": "naslednja zgradba",
"začetek": "naslednji začetek",
"lint": "naslednji lint",
"test": "jest --watchAll"
 },

Z vzpostavljenimi konfiguracijami nadaljujte s pisanjem in izvajanjem testov.

Preizkušanje aplikacije Next.js To-Do z Jestom

V korenskem imeniku projekta ustvarite novo mapo z imenom __testi__. Jest bo poiskal testne datoteke v tej mapi. Znotraj te mape ustvarite novo datoteko z imenom index.test.js.

Najprej izvedite naslednje uvoze.

uvoz domov od"../src/pages/index";
uvoz"@testing-library/jest-dom";
uvoz { fireEvent, render, screen, waitFor, act } od"@testing-library/react";

Napišite preizkus, da vidite, ali se vsi elementi pravilno upodabljajo:

opisati ("Aplikacija Todo", () => {
 to("upodobi aplikacijo Todo", () => {
 render(<domov />);

 pričakuj (screen.getByTestId("todo-input")).toBeInTheDocument();
 pričakuj (screen.getByTestId("dodaj opravilo")).toBeInTheDocument();
 });
});

Preizkusni primer preveri, ali se aplikacija To-Do in njeni elementi pravilno upodabljajo. Znotraj testnega primera je domov komponenta je upodobljena z uporabo upodabljati funkcijo iz testne knjižnice.

Nato se trditve izvedejo z uporabo pričakovati funkcijo za zagotovitev, da določeni elementi s testnimi ID-ji, kot npr vnos opravil so prisotni v upodobljenem izpisu. Če so ti elementi najdeni v DOM, je test uspešen; sicer ne uspe.

Zdaj zaženite naslednji ukaz za izvedbo testa.

preizkus izvajanja npm

Če je test uspešen, bi morali videti podoben odgovor.

Preizkušanje različnih dejanj in simulacija napak

Opišite te preskusne primere, da preverite delovanje funkcij Dodaj opravilo in Izbriši opravilo.

Začnite tako, da napišete testni primer za funkcijo Add To-Do.

 to("dodaj opravilo", asinh () => {
 render(<domov />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("dodaj opravilo");
konst todoList = screen.getByTestId("seznam opravil");
čakati dejanje(asinh () => {
 fireEvent.change (todoInput, { tarča: { vrednost: "Novo opravilo" } });
 addTodoButton.click();
 });
čakati počakaj na(() => {
 pričakuj (todoList).toHaveTextContent("Novo opravilo");
 });
 });

Zgornji delček kode simulira interakcijo uporabnika z vnosom v polje za vnos in klikom na gumb za dodajanje. Nato z uporabo lažne vhodne vrednosti opravila preveri, ali je vhodna vrednost uspešno dodana na seznam opravil.

Shranite datoteko in preverite terminal. Test bi se moral samodejno ponoviti in odjaviti podobne rezultate testa.

Če želite simulirati testno napako, spremenite testni ID gumba za dodajanje in znova zaženite test. S to posodobitvijo bi moral preizkus biti neuspešen in odjaviti sporočilo o napaki, ki označuje določeno napako.

V idealnem primeru ima testiranje v večji kodni bazi z več sodelujočimi, ki pogosto spreminjajo, ključno vlogo pri prepoznavanju potencialnih napak, ki bi lahko povzročile okvare sistema. S testiranjem lahko preprosto označite nedoslednosti, kot je prikazana zgoraj, in jih odpravite med razvojem.

Na koncu napišite testni primer za funkcijo Delete To-Do.

 to("izbriše opravilo", asinh () => {
 render(<domov />);

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

 fireEvent.change (todoInput, { tarča: { vrednost: "Todo 1" } });
 fireEvent.click (addTodoButton);

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

konst todoList = screen.getByTestId("seznam opravil");
čakati počakaj na(() => {
 pričakuj (todoList).toBeEmptyDOMElement();
 });
 });

Spet preveri, ali je opravilo uspešno izbrisano. Shranite datoteko za izvedbo testa.

Testiranje enot z uporabo Jest

Ta priročnik vam je ponudil znanje za pisanje in izvajanje enostavnih testov enote, pri čemer je kot primer uporabljena komponenta To-Do. Da zagotovite stabilnost in zanesljivost osnovnih funkcij vaše aplikacije in zmanjšate možnosti za nepričakovanih težav v produkcijskih okoljih, je pomembno dati prednost pisanju testov za vaš ključ komponente.

Poleg tega lahko izboljšate svoj pristop testiranja z vključitvijo testov posnetkov in testov od konca do konca.