A Next.js alkalmazások tesztelése a Jest használatával

Minden fejlesztési folyamat elsődleges célja a gyártásra kész alkalmazások felépítése. Ennek eléréséhez elengedhetetlen olyan kód megírása, amely nem csak a funkcionális követelményeket teljesíti, hanem az idő múlásával stabil és megbízható is marad. A tesztelés biztosítékként szolgál, és biztosítja, hogy az alkalmazások az elvárásoknak megfelelően működjenek, még akkor is, ha a fejlesztés során új frissítéseket hajtanak végre.

Míg a különféle éles eseteket felölelő átfogó tesztek megírása jelentős időt vehet igénybe, segít a problémák megjelölésében és megoldásában, mielőtt azok elérnék az éles környezetet.

A Next.js alkalmazások tesztelése

A tesztek írása elengedhetetlen és gyakran alábecsült szempont a robusztus alkalmazások fejlesztésében. Könnyen beleeshet a kísértésbe, hogy a kódot közvetlenül a termelésbe szállítsa, és arra a meggyőződésre hagyatkozik, hogy "Ön írta a kódot, tehát működnie kell!"

Ez a megközelítés azonban előre nem látott problémákhoz és hibákhoz vezethet az éles környezetben. Ennek eredményeként a tesztvezérelt fejlesztési (TDD) megközelítés alkalmazása segíthet maximalizálni a kódba vetett bizalmát, és minimalizálni a ráfordított időt. hibakeresés és kisebb hibák megoldása ami átcsúszhatott volna a gyártásba.

Mi az a Jest?

Tréfa egy népszerű tesztelési keretrendszer, amelyet széles körben használnak a különböző JavaScript keretrendszerek. Olyan tesztelési funkciókat kínál, mint például a hatékony tesztfutó, az automatikus gúnyolás és a pillanatfelvétel tesztelése.

Ideális esetben ezek a funkciók hasznosak az átfogó tesztlefedettség elérésében és az alkalmazás megbízhatóságának biztosításában különböző típusú tesztek.

Hozzon létre egy Next.js To-Do alkalmazást

Most pedig nézzük meg az egységtesztek futtatásának folyamatát egy Next.js alkalmazáson a Jest használatával. Mielőtt azonban elkezdené, hozzon létre egy Next.js projektet, és telepítse a szükséges függőségeket.

A kezdéshez kövesse az alábbi lépéseket:

1. Hozzon létre egy új Next.js projektet a következő parancs futtatásával a terminálon:

   npx create-next-app@latest teszt-oktatóanyag

2. A projekt létrehozása után navigáljon a projektkönyvtárba a következő futtatással:

   cd nextjs-test-tutorial

3. Telepítse a szükséges függőségeket mint devDependenciák a következő parancs futtatásával:

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

A projekt beállítása és a függőségek telepítése után készen áll a Next.js alkalmazás létrehozására és egységtesztek írására a Jest használatával.

Hozd létre a To-Do komponenst

Ban,-ben /src projekt könyvtárában nyissa meg a pages/index.js fájlt, törölje a meglévő Next.js kódot, és adja hozzá a következő kódot.

Először hajtsa végre a következő importálást, és határozzon meg két függvényt, amelyek kezelik a felhasználói teendőket: addTodo funkció és deleteTodo funkció.

import { useState } tól től"reagál";
import stílusok tól től"../styles/Home.module.css";
exportalapértelmezettfunkcióitthon() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
const addTodo = () => {
ha (newTodo.trim() !== "") {
const updatedTodos = [...todos, newTodo];
 setTodos (frissítettTodos);
 setNewTodo("");
 }
 };
const deleteTodo = (index) => {
const updatedTodos = [...todos];
 updatedTodos.splice (index, 1);
 setTodos (frissítettTodos);
 };

A kód a useState hook az állapotváltozók inicializálásához és frissítéséhez: todos és newTodo. A addTodo függvény egy új Teendőt ad a teendők listájához, ha a bemeneti érték nem üres, míg a deleteTodo függvény eltávolít egy adott teendőt a listából az indexe alapján.

Most írja be a böngésző DOM-ján megjelenített JSX elemek kódját.

Visszatérés (


 típus="szöveg"
 className={styles.input}
 value={newTodo}
 data-testid="todo-bemenet"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"add-todo">
 Todo hozzáadása
 </button>
"feladatlista">
 {todos.map((tennivaló, index) => (


 {csinálni}
 </li>
 ))}
 </ul>
 {todos.map((tennivaló, index) => (


 onClick={() => deleteTodo (index)}
 className={styles.button}
 data-testid={`töröl-teendő-${index}`}
 >
 Töröl
 </button>
 </div>
 ))}
 </div>
 );}

Tesztesetek írása

Mielőtt elkezdené a tesztesetek írását, kulcsfontosságú, hogy a Jestet az Ön sajátos tesztelési követelményeinek megfelelően konfigurálja. Ez magában foglalja a létrehozását és testreszabását jest.config.js fájlt, amely a tesztelési beállítások alapjául szolgál.

A gyökérkönyvtárban hozzon létre egy újat jest.config.js fájlt. Ezután adja hozzá a következő kódot a Jest megfelelő konfigurálásához:

const nextJest = igényelnek("következő/tréfa");
const createJestConfig = nextJest({
 rendező: "./",
});
const customJestConfig = {
 moduleDirectories: ["node_modules", "/"],
 tesztkörnyezet: "jest-environment-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Végül nyissa meg a package.json fájlt, és adjunk hozzá egy új szkriptet teszt amely végrehajtja a parancsot tréfa -- WatchAll az összes teszteset futtatásához és az esetleges változások figyeléséhez.

A frissítés után a szkripteknek így kell kinézniük:

"szkriptek": {
"fejlesztő": "következő fejlesztő",
"épít": "következő építmény",
"Rajt": "következő kezdés",
"szösz": "következő szösz",
"teszt": "Jest -- WatchAll"
 },

Ha a konfigurációk a helyükön vannak, folytassa a tesztek írását és végrehajtását.

A Next.js To-Do alkalmazás tesztelése a Jest segítségével

A projekt gyökérkönyvtárában hozzon létre egy új mappát, melynek neve __tesztek__. A Jest megkeresi a tesztfájlokat ebben a mappában. Ebben a mappában hozzon létre egy új fájlt index.test.js.

Először hajtsa végre a következő importálást.

import itthon tól től"../src/pages/index";
import"@testing-library/jest-dom";
import { fireEvent, render, screen, waitFor, act } tól től"@testing-library/react";

Írjon egy tesztet, hogy ellenőrizze, hogy az összes elem megfelelően jelenik-e meg:

leír("Todo App", () => {
 azt("rendereli a todo alkalmazást", () => {
 Vakol(<itthon />);

 vár (screen.getByTestId("todo-bemenet")).ToBeInTheDocument();
 vár (screen.getByTestId("add-todo")).ToBeInTheDocument();
 });
});

A teszteset ellenőrzi, hogy a To-Do alkalmazás és elemei megfelelően jelennek-e meg. A próbatesten belül a itthon komponens a Vakol függvényt a tesztelési könyvtárból.

Ezután az állítások a elvárják funkció biztosítja, hogy bizonyos tesztazonosítókkal rendelkező elemek, mint pl todo-bemenet jelen vannak a renderelt kimenetben. Ha ezek az elemek megtalálhatók a DOM-ban, a teszt sikeres; különben nem sikerül.

Most futtassa a következő parancsot a teszt végrehajtásához.

npm futási teszt

Hasonló választ kell látnia, ha a teszt sikeres.

Különböző műveletek tesztelése és hibák szimulálása

Ismertesse ezeket a teszteseteket a Teendők hozzáadása és a Teendők törlése funkciók működőképességének ellenőrzéséhez.

Kezdje a Teendő hozzáadása funkció tesztesetének megírásával.

 azt("hozzáad egy teendőt", async () => {
 Vakol(<itthon />);

const todoInput = screen.getByTestId("todo-bemenet");
const addTodoButton = screen.getByTestId("add-todo");
const todoList = screen.getByTestId("feladatlista");
várja törvény(async () => {
 fireEvent.change (todoInput, { cél: { érték: "Új feladat" } });
 addTodoButton.click();
 });
várja várni rá(() => {
 elvár (todoList).toHaveTextContent("Új feladat");
 });
 });

A fenti kódrészlet szimulálja a felhasználói interakciót úgy, hogy beír egy beviteli mezőbe, és rákattint a Hozzáadás gombra. Ezután egy hamis To-Do bemeneti érték használatával ellenőrzi, hogy a bemeneti érték sikeresen hozzáadásra került-e a To-Do listához.

Mentse el a fájlt, és ellenőrizze a terminált. A tesztnek automatikusan újra kell futnia, és ki kell jelentkeznie a hasonló teszteredményekről.

Teszthiba szimulálásához módosítsa a hozzáadás gomb tesztazonosítóját, és futtassa újra a tesztet. Ezzel a frissítéssel a tesztnek sikertelennek kell lennie, és ki kell jelentkeznie egy hibaüzenettel, amely jelzi a konkrét hibát.

Ideális esetben egy nagyobb kódbázisban, ahol több közreműködő is gyakran változtat, a tesztelés döntő szerepet játszik a lehetséges hibák azonosításában, amelyek rendszerhibákhoz vezethetnek. A teszteléssel könnyedén megjelölheti az inkonzisztenciákat, például a fent bemutatottakat, és a fejlesztés során feloldhatja azokat.

Végül írja meg a Teendők törlése funkció tesztesetét.

 azt("töröl egy teendőt", async () => {
 Vakol(<itthon />);

const todoInput = screen.getByTestId("todo-bemenet");
const addTodoButton = screen.getByTestId("add-todo");

 fireEvent.change (todoInput, { cél: { érték: "Todo 1" } });
 fireEvent.click (addTodoButton);

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

const todoList = screen.getByTestId("feladatlista");
várja várni rá(() => {
 vár (todoList).toBeEmptyDOMElement();
 });
 });

Ismét ellenőrzi, hogy a teendőt sikeresen törölték-e. Mentse el a fájlt a teszt végrehajtásához.

Egységtesztelés a Jest használatával

Ez az útmutató olyan ismereteket adott Önnek, amelyek segítségével egyszerű egységteszteket írhat és hajthat végre, példaként egy To-Do komponens használatával. Alkalmazása alapvető funkcióinak stabilitásának és megbízhatóságának biztosítása, valamint annak esélyeinek csökkentése Ha váratlan problémák merülnek fel éles környezetben, fontos, hogy prioritást adjon a kulcshoz tartozó tesztek írásának alkatrészek.

Ezenkívül pillanatfelvételi tesztek és végpontok közötti tesztek beépítésével javíthatja tesztelési megközelítését.