Ako testovať aplikácie Next.js pomocou Jest

Primárnym cieľom každého vývojového procesu je vytvoriť aplikácie pripravené na výrobu. Na dosiahnutie tohto cieľa je nevyhnutné napísať kód, ktorý nielen spĺňa funkčné požiadavky, ale zostáva stabilný a spoľahlivý v priebehu času. Testovanie slúži ako ochrana, ktorá zabezpečuje, že aplikácie fungujú podľa očakávania, aj keď sa počas vývoja vykonajú nové aktualizácie.

Aj keď písanie komplexných testov, ktoré zahŕňajú rôzne okrajové prípady, môže trvať značné množstvo času, pomáha označovať a riešiť problémy skôr, ako sa dostanú do produkčného prostredia.

Testovanie aplikácií Next.js

Písanie testov je základným a často podceňovaným aspektom vývoja robustných aplikácií. Je ľahké podľahnúť pokušeniu posielať kód priamo do výroby, spoliehajúc sa na presvedčenie, že „vy ste tvorili kód, takže musí fungovať!“

Tento prístup však môže viesť k nepredvídaným problémom a chybám v produkčnom prostredí. Výsledkom je, že prijatie prístupu vývoja riadeného testovaním (TDD) vám môže pomôcť maximalizovať vašu dôveru vo váš kód a minimalizovať čas strávený

Čo je Jest?

Jest je populárny testovací rámec, ktorý je široko používaný rôznymi JavaScriptové rámce. Poskytuje súbor testovacích funkcií, ako je výkonný testovací bežec, automatické zosmiešňovanie a testovanie snímok.

V ideálnom prípade sú tieto funkcie užitočné pri dosahovaní komplexného pokrytia testov a zabezpečovaní spoľahlivosti vašej aplikácie rôzne typy testov.

Vytvorte aplikáciu Next.js To-Do

Teraz sa poďme ponoriť do procesu spúšťania testov jednotiek v aplikácii Next.js pomocou Jest. Predtým, ako začnete, vytvorte projekt Next.js a nainštalujte požadované závislosti.

Ak chcete začať, postupujte takto:

1. Vytvorte nový projekt Next.js spustením nasledujúceho príkazu v termináli:

   npx create-next-app@latest test-tutorial

2. Po vytvorení projektu prejdite do adresára projektu spustením:

   cd nextjs-test-tutorial

3. Nainštalujte potrebné závislosti ako devDependencies spustením nasledujúceho príkazu:

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

S nastaveným projektom a nainštalovanými závislosťami ste teraz pripravení zostaviť aplikáciu Next.js a písať testy jednotiek pomocou Jest.

Vytvorte komponent úlohy

V /src adresár projektu, otvorte pages/index.js súbor, odstráňte existujúci štandardný kód Next.js a pridajte nasledujúci kód.

Najprv vykonajte nasledujúce importy a definujte dve funkcie, ktoré budú spravovať úlohy používateľa: addTodo funkciu a deleteTodo funkciu.

importovať { useState } od"reagovať";
importovať štýlov od"../styles/Home.module.css";
exportpredvolenáfunkciuDomov() {
konšt [todos, setTodos] = useState([]);
konšt [newTodo, setNewTodo] = useState("");
konšt addTodo = () => {
ak (newTodo.trim() !== "") {
konšt updatedTodos = [...todos, newTodo];
 setTodos (aktualizovanéTodos);
 setNewTodo("");
 }
 };
konšt deleteTodo = (index) => {
konšt updatedTodos = [...todos];
 updatedTodos.splice (index, 1);
 setTodos (aktualizovanéTodos);
 };

Kód využíva useState hák na inicializáciu a aktualizáciu stavových premenných: todos a newTodo. The addTodo funkcia pridá nový To-Do do zoznamu úloh, keď vstupná hodnota nie je prázdna, zatiaľ čo deleteTodo funkcia odstráni konkrétny To-Do zo zoznamu na základe jeho indexu.

Teraz napíšte kód pre prvky JSX vykreslené na DOM prehliadača.

vrátiť (


 typ="text"
 className={styles.input}
 value={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"add-todo">
 Pridať úlohu
 </button>
"zoznam úloh">
 {todos.map((todo, index) => (


 {robiť}
 </li>
 ))}
 </ul>
 {todos.map((todo, index) => (


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

Písanie testovacích prípadov

Než začnete písať testovacie prípady, je dôležité nakonfigurovať Jest podľa vašich špecifických testovacích požiadaviek. To zahŕňa vytváranie a prispôsobenie jest.config.js súbor, ktorý slúži ako základ pre vaše testovacie nastavenie.

V koreňovom adresári vytvorte nový jest.config.js súbor. Potom pridajte nasledujúci kód na príslušnú konfiguráciu Jest:

konšt nextJest = vyžadovať("ďalší/žart");
konšt createJestConfig = nextJest({
 dir: "./",
});
konšt customJestConfig = {
 adresáre modulov: ["moduly_uzlov", "/"],
 testEnvironment: "jest-environment-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Nakoniec otvorte package.json súbor a pridajte nový skript s názvom test ktorý vykoná príkaz vtip --watchAll spustiť všetky testovacie prípady a sledovať prípadné zmeny.

Po vykonaní aktualizácie by vaše skripty mali vyzerať takto:

"skriptá": {
"dev": "ďalší vývoj",
"stavať": "ďalšia stavba",
"štart": "ďalší štart",
"žmolky": "ďalší riadok",
"test": "žart --pozerať všetko"
 },

S nastavenými konfiguráciami pokračujte v písaní a vykonávaní testov.

Testovanie aplikácie Next.js To-Do s Jest

V koreňovom adresári projektu vytvorte nový priečinok s názvom __testy__. Jest vyhľadá testovacie súbory v tomto priečinku. V tomto priečinku vytvorte nový súbor s názvom index.test.js.

Najprv vykonajte nasledujúce importy.

importovať Domov od"../src/pages/index";
importovať"@testovacia-knižnica/jest-dom";
importovať { fireEvent, render, screen, waitFor, act } od"@testing-library/react";

Napíšte test, aby ste zistili, či sa všetky prvky vykresľujú správne:

opísať ("Aplikácia Todo", () => {
 to ("vykreslí aplikáciu todo", () => {
 render(<Domov />);

 očakávať (screen.getByTestId("todo-input")).toBeInTheDocument();
 očakávať (screen.getByTestId("add-todo")).toBeInTheDocument();
 });
});

Testovací prípad overuje, či sa aplikácia To-Do a jej prvky vykresľujú správne. Vo vnútri testovacieho prípadu je Domov komponent je vykreslený pomocou vykresliť funkcie z testovacej knižnice.

Potom sa urobia tvrdenia pomocou očakávať funkciu, ktorá zabezpečí, že špecifické prvky s testovacími ID, ako napr todo-input sú prítomné vo vykreslenom výstupe. Ak sa tieto prvky nájdu v DOM, test prejde; inak zlyhá.

Teraz spustite nasledujúci príkaz na vykonanie testu.

test chodu npm

Ak test prejde, mali by ste vidieť podobnú odpoveď.

Testovanie rôznych akcií a simulovanie chýb

Opíšte tieto testovacie prípady, aby ste si overili funkčnosť funkcií Add To-Do a Delete To-Do.

Začnite napísaním testovacieho prípadu funkcie Add To-Do.

 to ("pridá úlohu", async () => {
 render(<Domov />);

konšt todoInput = screen.getByTestId("todo-input");
konšt addTodoButton = screen.getByTestId("add-todo");
konšt todoList = screen.getByTestId("zoznam úloh");
čakať konať (async () => {
 fireEvent.change (todoInput, { cieľ: { hodnotu: "New Todo" } });
 addTodoButton.click();
 });
čakať čakať na(() => {
 očakávať (todoList).toHaveTextContent("New Todo");
 });
 });

Útržok kódu uvedený vyššie simuluje interakciu používateľa zadaním do vstupného poľa a kliknutím na tlačidlo Pridať. Potom pomocou falošnej vstupnej hodnoty úlohy overí, či bola vstupná hodnota úspešne pridaná do zoznamu úloh.

Uložte súbor a skontrolujte terminál. Test by sa mal automaticky znova spustiť a odhlásiť podobné výsledky testu.

Ak chcete simulovať chybu testu, upravte ID testu tlačidla Pridať a znova spustite test. S touto aktualizáciou by mal test zlyhať a odhlásiť chybové hlásenie označujúce konkrétnu chybu, ktorá sa vyskytla.

V ideálnom prípade vo väčšej kódovej základni s viacerými prispievateľmi, ktorí robia časté zmeny, hrá testovanie kľúčovú úlohu pri identifikácii potenciálnych chýb, ktoré by mohli viesť k zlyhaniam systému. Testovaním môžete ľahko označiť nezrovnalosti, ako je tá, ktorá bola demonštrovaná vyššie, a vyriešiť ich počas vývoja.

Nakoniec napíšte testovací prípad funkcie Delete To-Do.

 to ("odstráni úlohu", async () => {
 render(<Domov />);

konšt todoInput = screen.getByTestId("todo-input");
konšt addTodoButton = screen.getByTestId("add-todo");

 fireEvent.change (todoInput, { cieľ: { hodnotu: "Úloha 1" } });
 fireEvent.click (addTodoButton);

konšt deleteTodoButton = screen.getByTestId("delete-todo-0");
 fireEvent.click (deleteTodoButton);

konšt todoList = screen.getByTestId("zoznam úloh");
čakať čakať na(() => {
 očakávať (todoList).toBeEmptyDOMElement();
 });
 });

Opäť overí, či sa úloha úspešne odstránila. Uložte súbor na vykonanie testu.

Testovanie jednotiek pomocou Jest

Táto príručka vám poskytla znalosti na písanie a vykonávanie jednoduchých jednotkových testov, pričom ako príklad používa komponent To-Do. Na zabezpečenie stability a spoľahlivosti základných funkcií vašej aplikácie a zníženie pravdepodobnosti neočakávané problémy v produkčnom prostredí, je dôležité uprednostniť písanie testov pre váš kľúč komponentov.

Okrem toho môžete vylepšiť svoj prístup k testovaniu začlenením testov snímok a testov typu end-to-end.