Cum să testați aplicațiile Next.js folosind Jest

Obiectivul principal al oricărui proces de dezvoltare este de a construi aplicații pregătite pentru producție. Pentru a realiza acest lucru, este esențial să scrieți cod care nu numai să îndeplinească cerințele funcționale, dar să rămână stabil și fiabil în timp. Testarea servește drept garanție, asigurând că aplicațiile funcționează conform așteptărilor, chiar dacă sunt făcute noi actualizări în timpul dezvoltării.

În timp ce scrierea de teste cuprinzătoare care cuprind diferite cazuri marginale poate dura o perioadă considerabilă de timp, este de ajutor să semnalizeze și să rezolve problemele înainte ca acestea să ajungă în mediile de producție.

Testarea aplicațiilor Next.js

Scrierea testelor este un aspect esențial și adesea subestimat al dezvoltării de aplicații robuste. Este ușor să cazi în tentația de a expedia codul direct către producție, bazându-te pe credința că „ai creat codul, așa că trebuie să funcționeze!”

Cu toate acestea, această abordare poate duce la probleme neprevăzute și erori în mediile de producție. Drept urmare, adoptarea unei abordări de dezvoltare bazată pe teste (TDD) vă poate ajuta să vă maximizați încrederea în codul dvs. și să minimizați timpul petrecut depanarea și rezolvarea erorilor minore care ar fi putut aluneca la producție.

Ce este gluma?

Glumă este un cadru de testare popular care este utilizat pe scară largă de către diferiți cadre JavaScript. Oferă o suită de funcții de testare, cum ar fi un test puternic, batjocură automată și testare instantanee.

În mod ideal, aceste caracteristici sunt utile pentru a realiza o acoperire cuprinzătoare a testelor și pentru a asigura fiabilitatea aplicației dvs. diferite tipuri de teste.

Creați o aplicație Next.js To-Do

Acum, să analizăm procesul de rulare a testelor unitare pe o aplicație Next.js folosind Jest. Cu toate acestea, înainte de a începe, creați un proiect Next.js și instalați dependențele necesare.

Pentru a începe, urmați acești pași:

1. Creați un nou proiect Next.js rulând următoarea comandă în terminalul dvs.:

   npx create-next-app@latest test-tutorial

2. După crearea proiectului, navigați în directorul proiectului rulând:

   cd nextjs-test-tutorial

3. Instalați dependențele necesare ca dependențe de dezvoltare rulând următoarea comandă:

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

Cu proiectul configurat și dependențele instalate, acum sunteți gata să construiți aplicația Next.js și să scrieți teste unitare folosind Jest.

Creați Componenta To-Do

În /src directorul proiectului, deschideți pages/index.js fișier, ștergeți codul standard Next.js existent și adăugați următorul cod.

Mai întâi, faceți următoarele importuri și definiți două funcții care vor gestiona sarcinile de lucru ale utilizatorului: addTodo funcţia şi deleteTodo funcţie.

import { useState } din"reacţiona";
import stiluri din„../styles/Home.module.css”;
exportMod implicitfuncţieAcasă() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
const addTodo = () => {
dacă (newTodo.trim() !== "") {
const updatedTodos = [...todos, newTodo];
 setTodos (actualizatTodos);
 setNewTodo("");
 }
 };
const deleteTodo = (index) => {
const updatedTodos = [...todos];
 updatedTodos.splice (index, 1);
 setTodos (actualizatTodos);
 };

Codul utilizează useState cârlig pentru a inițializa și actualiza variabilele de stare: toate și nouTodo. The addTodo funcția adaugă un nou To-Do la lista de toate când valoarea de intrare nu este goală, în timp ce deleteTodo funcția elimină un anumit To-Do din listă pe baza indexului său.

Acum, scrieți codul pentru elementele JSX redate pe DOM-ul browserului.

întoarcere (


 tip="text"
 className={styles.input}
 valoare={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"adăugați de făcut">
 Adăugați Todo
 </button>
"lista de lucruri">
 {todos.map((tot, index) => (


 {a face}
 </li>
 ))}
 </ul>
 {todos.map((tot, index) => (


 onClick={() => ștergeTodo (index)}
 className={styles.button}
 data-testid={`delete-todo-${index}`}
 >
 Șterge
 </button>
 </div>
 ))}
 </div>
 );}

Scrierea cazurilor de testare

Înainte de a începe să scrieți cazuri de testare, este esențial să configurați Jest în funcție de cerințele dvs. specifice de testare. Aceasta implică crearea și personalizarea jest.config.js fișier, care servește drept bază pentru configurarea dvs. de testare.

În directorul rădăcină, creați un nou jest.config.js fişier. Apoi, adăugați următorul cod pentru a configura Jest în consecință:

const nextJest = cere("urmatorul/ gluma");
const createJestConfig = nextJest({
 dir: "./",
});
const customJestConfig = {
 moduleDirectories: ["module_noduri", "/"],
 mediu de testare: "gluma-mediu-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

În cele din urmă, deschideți pachet.json fișier și adăugați un nou script numit Test care va executa comanda gluma --watchAll pentru a rula toate cazurile de testare și pentru a urmări orice modificări.

După efectuarea actualizării, scripturile ar trebui să arate astfel:

"scripte": {
"dev": „următorul dezvoltare”,
"construi": "următoarea construcție",
"start": „următorul început”,
"puf": „următorul scamă”,
"Test": "gluma --watchAll"
 },

Cu configurațiile la locul lor, continuați cu scrierea și executarea testelor.

Testarea aplicației Next.js To-Do cu Jest

În directorul rădăcină al proiectului, creați un folder nou numit __teste__. Jest va căuta fișiere de testare în acest folder. În acest folder, creați un fișier nou numit index.test.js.

Mai întâi, faceți următoarele importuri.

import Acasă din„../src/pages/index”;
import„@testing-library/jest-dom”;
import { fireEvent, render, screen, waitFor, act } din„@testing-library/react”;

Scrieți un test pentru a vedea dacă toate elementele sunt redate corect:

descrie(„Aplicația Todo”, () => {
 aceasta(„reda aplicația todo”, () => {
 face(<Acasă />);

 așteptați (screen.getByTestId("todo-input")).toBeInTheDocument();
 așteptați (screen.getByTestId("adăugați de făcut")).toBeInTheDocument();
 });
});

Cazul de testare verifică dacă aplicația To-Do și elementele sale sunt afișate corect. În interiorul cazului de testare, Acasă componenta este redată folosind face funcția din biblioteca de testare.

Apoi, se fac afirmații folosind aştepta funcția pentru a se asigura că anumite elemente cu ID-uri de testare, cum ar fi tot-input sunt prezente în ieșirea redată. Dacă aceste elemente se găsesc în DOM, testul trece; altfel, eșuează.

Acum, rulați următoarea comandă pentru a executa testul.

testul de rulare npm

Ar trebui să vedeți un răspuns similar dacă testul trece.

Testarea diferitelor acțiuni și simularea erorilor

Descrieți aceste cazuri de testare pentru a verifica funcționalitatea funcțiilor Adăugare de făcut și Ștergere de făcut.

Începeți prin a scrie cazul de testare pentru funcționalitatea Add To-Do.

 aceasta("adaugă tot", asincron () => {
 face(<Acasă />);

const todoInput = screen.getByTestId("todo-input");
const addTodoButton = screen.getByTestId("adăugați de făcut");
const todoList = screen.getByTestId("lista de lucruri");
așteaptă act(asincron () => {
 fireEvent.change (todoInput, { ţintă: { valoare: "Noua rezolvare" } });
 addTodoButton.click();
 });
așteaptă asteapta pentru(() => {
 așteptați (todoList).toHaveTextContent("Noua rezolvare");
 });
 });

Fragmentul de cod de mai sus simulează interacțiunea utilizatorului tastând într-un câmp de introducere și făcând clic pe butonul de adăugare. Apoi, folosind o valoare de intrare simulată To-Do, se verifică dacă valoarea de intrare a fost adăugată cu succes la lista de activități.

Salvați fișierul și verificați terminalul. Testul ar trebui să se execute din nou automat și să se deconecteze din rezultatele testelor similare.

Pentru a simula o eroare de testare, modificați ID-ul testului butonului de adăugare și executați din nou testul. Cu această actualizare, testul ar trebui să eșueze și să se deconecteze un mesaj de eroare care indică eroarea specifică întâlnită.

În mod ideal, într-o bază de cod mai mare, cu mai mulți contribuitori care fac modificări frecvente, testarea joacă un rol crucial în identificarea erorilor potențiale care ar putea duce la defecțiuni ale sistemului. Prin testare, puteți semnala cu ușurință inconsecvențele, cum ar fi cea demonstrată mai sus, și le puteți rezolva în timpul dezvoltării.

În cele din urmă, scrieți cazul de testare pentru funcționalitatea Delete To-Do.

 aceasta("șterge o tot", asincron () => {
 face(<Acasă />);

const todoInput = screen.getByTestId("todo-input");
const addTodoButton = screen.getByTestId("adăugați de făcut");

 fireEvent.change (todoInput, { ţintă: { valoare: „Tot 1” } });
 fireEvent.click (addTodoButton);

const deleteTodoButton = screen.getByTestId(„șterge-todo-0”);
 fireEvent.click (deleteTodoButton);

const todoList = screen.getByTestId("lista de lucruri");
așteaptă asteapta pentru(() => {
 astept (todoList).toBeEmptyDOMElement();
 });
 });

Din nou, verifică dacă To-Do a fost ștearsă cu succes. Salvați fișierul pentru a executa testul.

Testarea unitară folosind Jest

Acest ghid v-a oferit cunoștințele necesare pentru a scrie și a executa teste unitare simple, folosind o componentă To-Do ca exemplu. Pentru a asigura stabilitatea și fiabilitatea caracteristicilor de bază ale aplicației dvs. și pentru a reduce șansele de probleme neașteptate în mediile de producție, este important să acordați prioritate testelor de scriere pentru cheia dvs componente.

În plus, vă puteți îmbunătăți abordarea de testare încorporând teste instantanee și teste end-to-end.