Kako testirati Next.js aplikacije koristeći Jest

Primarni cilj svakog razvojnog procesa je izgradnja aplikacija spremnih za proizvodnju. Da bi se to postiglo, bitno je napisati kod koji ne samo da ispunjava funkcionalne zahtjeve, već također ostaje stabilan i pouzdan tijekom vremena. Testiranje služi kao zaštita, osiguravajući da aplikacije funkcioniraju prema očekivanjima čak i kada se tijekom razvoja rade nova ažuriranja.

Iako pisanje sveobuhvatnih testova koji obuhvaćaju različite rubne slučajeve može potrajati dosta vremena, pomaže u označavanju i rješavanju problema prije nego što dospiju u proizvodna okruženja.

Testiranje Next.js aplikacija

Pisanje testova bitan je i često podcijenjen aspekt razvoja robusnih aplikacija. Lako je pasti u iskušenje slanja koda izravno u proizvodnju, oslanjajući se na uvjerenje da ste "vi autor koda, stoga mora raditi!"

Međutim, ovaj pristup može dovesti do nepredviđenih problema i grešaka u proizvodnim okruženjima. Kao rezultat toga, usvajanje pristupa razvoja vođenog testiranjem (TDD) može pomoći da povećate svoje povjerenje u svoj kod i smanjite potrošeno vrijeme

Što je Jest?

šala je popularan okvir za testiranje koji naširoko koriste različiti JavaScript okviri. Omogućuje paket značajki za testiranje kao što je moćan pokretač testova, automatsko ismijavanje i testiranje snimki.

U idealnom slučaju, ove značajke dobro dođu u postizanju sveobuhvatne pokrivenosti testom i osiguravanju pouzdanosti vaše aplikacije diljem različite vrste testova.

Stvorite Next.js To-Do aplikaciju

Zaronimo sada u proces pokretanja jediničnih testova na Next.js aplikaciji pomoću Jesta. Međutim, prije nego počnete, izradite Next.js projekt i instalirajte potrebne ovisnosti.

Za početak slijedite ove korake:

1. Stvorite novi Next.js projekt pokretanjem sljedeće naredbe na vašem terminalu:

   npx create-next-app@najnoviji test-tutorial

2. Nakon izrade projekta, idite u direktorij projekta tako što ćete pokrenuti:

   cd nextjs-test-tutorial

3. Instalirajte potrebne ovisnosti kao devDependencies pokretanjem sljedeće naredbe:

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

S postavljenim projektom i instaliranim ovisnostima, sada ste spremni za izgradnju Next.js aplikacije i pisanje jediničnih testova pomoću Jesta.

Napravite komponentu To-Do

u /src imenik projekta, otvorite stranice/index.js datoteku, izbrišite postojeći predložak Next.js koda i dodajte sljedeći kod.

Najprije izvršite sljedeće uvoze i definirajte dvije funkcije koje će upravljati korisničkim obavezama: addTodo funkcija i deleteTodo funkcija.

uvoz {useState} iz"reagirati";
uvoz stilovi iz"../styles/Home.module.css";
izvozzadanofunkcijaDom() {
konst [todos, setTodos] = useState([]);
konst [noviTodo, setNewTodo] = useState("");
konst dodajTodo = () => {
ako (newTodo.trim() !== "") {
konst ažuriraniTodos = [...todos, newTodo];
 setTodos (ažuriraniTodos);
 setNewTodo("");
 }
 };
konst deleteTodo = (indeks) => {
konst ažuriraniTodos = [...todos];
 updatedTodos.splice (indeks, 1);
 setTodos (ažuriraniTodos);
 };

Kod koristi useState kuka za inicijalizaciju i ažuriranje varijabli stanja: todos i noviTodo. The addTodo dodaje novi To-Do na popis todos kada ulazna vrijednost nije prazna, dok je deleteTodo uklanja određeni zadatak s popisa na temelju njegovog indeksa.

Sada napišite kod za JSX elemente prikazane u DOM-u preglednika.

povratak (


 vrsta="tekst"
 className={styles.input}
 vrijednost={newTodo}
 data-testid="do-unos"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"dodaj-todo">
 Dodaj Todo
 </button>
"popis obveza">
 {todos.map((todo, indeks) => (


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


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

Pisanje testnih slučajeva

Prije nego počnete pisati testne slučajeve, ključno je konfigurirati Jest prema vašim specifičnim zahtjevima testiranja. To uključuje stvaranje i prilagodbu jest.config.js datoteku koja služi kao temelj za vaše postavke testiranja.

U korijenskom direktoriju stvorite novi jest.config.js datoteka. Zatim dodajte sljedeći kôd da konfigurirate Jest u skladu s tim:

konst nextJest = zahtijevati("sljedeća/šala");
konst createJestConfig = nextJest({
 smjer: "./",
});
konst customJestConfig = {
 moduleDirectories: ["moduli_čvora", "/"],
 testna okolina: "jest-environment-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Na kraju otvorite paket.json datoteku i dodajte novu skriptu pod nazivom test koji će izvršiti naredbu šala --gledajSve za pokretanje svih testnih slučajeva i promatranje promjena.

Nakon ažuriranja vaše bi skripte trebale izgledati ovako:

"skripte": {
"dev": "sljedeći razvojni programer",
"izgraditi": "sljedeća izgradnja",
"početak": "sljedeći početak",
"dlahice": "sljedeća traka",
"test": "šala --gledaj sve"
 },

S postavljenim konfiguracijama, nastavite s pisanjem i izvođenjem testova.

Testiranje aplikacije Next.js To-Do s Jestom

U korijenskom direktoriju projekta stvorite novu mapu pod nazivom __testovi__. Jest će potražiti testne datoteke u ovoj mapi. Unutar ove mape stvorite novu datoteku pod nazivom index.test.js.

Prvo izvršite sljedeće uvoze.

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

Napišite test da vidite prikazuju li se svi elementi ispravno:

opisati("Aplikacija Obaveze", () => {
 to("renderira aplikaciju Todo", () => {
 prikazati (<Dom />);

 očekuj (screen.getByTestId("do-unos")).bitiUDokumentu();
 očekuj (screen.getByTestId("dodaj-todo")).bitiUDokumentu();
 });
});

Testni slučaj provjerava prikazuju li se aplikacija To-Do i njezini elementi ispravno. Unutar testnog slučaja, Dom komponenta se prikazuje pomoću prikazati funkcija iz biblioteke za testiranje.

Zatim se tvrdnje daju pomoću očekivati funkcionirati kako bi se osiguralo da specifični elementi s ID-ovima testa, kao što su unos obaveza prisutni su u renderiranom izlazu. Ako se ti elementi pronađu u DOM-u, test prolazi; inače ne uspijeva.

Sada pokrenite sljedeću naredbu da biste izvršili test.

npm trčanje testa

Trebali biste vidjeti sličan odgovor ako test prođe.

Testiranje različitih radnji i simulacija pogrešaka

Opišite ove testne slučajeve kako biste provjerili funkcionalnost značajki Add To-Do i Delete To-Do.

Započnite pisanjem testnog slučaja za funkciju Add To-Do.

 to("dodaje zadatak", asinkroni () => {
 prikazati (<Dom />);

konst todoInput = screen.getByTestId("do-unos");
konst addTodoButton = screen.getByTestId("dodaj-todo");
konst todoList = screen.getByTestId("popis obveza");
čekati djelovati (asinkroni () => {
 fireEvent.change (todoInput, { cilj: { vrijednost: "Novi zadatak" } });
 addTodoButton.click();
 });
čekati čekati(() => {
 očekuj (todoList).toHaveTextContent("Novi zadatak");
 });
 });

Gornji isječak koda simulira interakciju korisnika upisivanjem u polje za unos i klikom na gumb za dodavanje. Zatim, pomoću lažne ulazne vrijednosti To-Do, provjerava je li ulazna vrijednost uspješno dodana na popis To-Do.

Spremite datoteku i provjerite terminal. Test bi se trebao automatski ponoviti i odjaviti slične rezultate testa.

Da biste simulirali grešku testa, promijenite ID testa gumba za dodavanje i ponovno pokrenite test. Uz ovo ažuriranje, test bi trebao biti neuspješan i odjaviti poruku o pogrešci koja ukazuje na konkretnu pogrešku.

U idealnom slučaju, u većoj bazi koda s višestrukim suradnicima koji često mijenjaju, testiranje igra ključnu ulogu u prepoznavanju potencijalnih grešaka koje bi mogle dovesti do kvarova sustava. Testiranjem možete jednostavno označiti nedosljednosti, kao što je gore prikazana, i riješiti ih tijekom razvoja.

Na kraju napišite testni slučaj za funkciju Brisanje zadataka.

 to("briše zadatak", asinkroni () => {
 prikazati (<Dom />);

konst todoInput = screen.getByTestId("do-unos");
konst addTodoButton = screen.getByTestId("dodaj-todo");

 fireEvent.change (todoInput, { cilj: { vrijednost: "Zadatak 1" } });
 fireEvent.click (addTodoButton);

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

konst todoList = screen.getByTestId("popis obveza");
čekati čekati(() => {
 očekuj (todoList).toBeEmptyDOMElement();
 });
 });

Opet, provjerava je li To-Do uspješno izbrisan. Spremite datoteku za izvođenje testa.

Jedinično testiranje pomoću Jesta

Ovaj vam je vodič pružio znanje za pisanje i izvođenje jednostavnih jediničnih testova, koristeći To-Do komponentu kao primjer. Kako biste osigurali stabilnost i pouzdanost osnovnih značajki svoje aplikacije i smanjili šanse za neočekivanih problema u proizvodnim okruženjima, važno je dati prioritet pisanju testova za vaš ključ komponente.

Nadalje, možete poboljšati svoj pristup testiranju uključivanjem brzih testova i end-to-end testova.