Jak testovat aplikace Next.js pomocí Jest

Primárním cílem každého vývojového procesu je vytvářet aplikace připravené pro výrobu. K dosažení tohoto cíle je nezbytné napsat kód, který nejen splňuje funkční požadavky, ale také zůstává stabilní a spolehlivý v průběhu času. Testování slouží jako ochrana, která zajišťuje, že aplikace fungují podle očekávání, i když jsou během vývoje provedeny nové aktualizace.

I když psaní komplexních testů, které zahrnují různé okrajové případy, může zabrat značné množství času, pomáhá označovat a řešit problémy dříve, než se dostanou do produkčního prostředí.

Testování aplikací Next.js

Psaní testů je základním a často podceňovaným aspektem vývoje robustních aplikací. Je snadné podlehnout pokušení zasílat kód přímo do výroby a spoléhat se na přesvědčení, že "vy jste kód vytvořili, takže musí fungovat!"

Tento přístup však může vést k nepředvídatelným problémům a chybám v produkčním prostředí. V důsledku toho může přijetí přístupu vývoje řízeného testováním (TDD) pomoci maximalizovat vaši důvěru ve váš kód a minimalizovat čas strávený

Co je Jest?

Žert je populární testovací rámec, který je široce používán různými JavaScriptové rámce. Poskytuje sadu testovacích funkcí, jako je výkonný testovací běh, automatické zesměšňování a testování snímků.

V ideálním případě se tyto funkce hodí k dosažení komplexního pokrytí testů a zajištění spolehlivosti vaší aplikace napříč různé typy testů.

Vytvořte aplikaci Next.js To-Do

Nyní se pojďme ponořit do procesu spouštění testů jednotek v aplikaci Next.js pomocí Jest. Než však začnete, vytvořte projekt Next.js a nainstalujte požadované závislosti.

Chcete-li začít, postupujte takto:

1. Vytvořte nový projekt Next.js spuštěním následujícího příkazu v terminálu:

   npx create-next-app@latest test-tutorial

2. Po vytvoření projektu přejděte do adresáře projektu spuštěním:

   cd nextjs-test-tutorial

3. Nainstalujte potřebné závislosti jako devDependencies spuštěním následujícího příkazu:

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

S nastavením projektu a nainstalovanými závislostmi jste nyní připraveni vytvořit aplikaci Next.js a psát testy jednotek pomocí Jest.

Vytvořte komponentu To-Do

V /src adresář projektu, otevřete pages/index.js soubor, odstraňte stávající standardní kód Next.js a přidejte následující kód.

Nejprve proveďte následující importy a definujte dvě funkce, které budou spravovat úkoly uživatele: addTodo funkce a deleteTodo funkce.

import { useState } z"reagovat";
import styly z"../styles/Home.module.css";
vývoznívýchozífunkceDomov() {
konst [todos, setTodos] = useState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
-li (newTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (updatedTodos);
 setNewTodo("");
 }
 };
konst deleteTodo = (index) => {
konst updatedTodos = [...todos];
 updatedTodos.splice (index, 1);
 setTodos (updatedTodos);
 };

Kód využívá useState hák pro inicializaci a aktualizaci stavových proměnných: todos a newTodo. The addTodo funkce přidá nový Úkol do seznamu úkolů, když vstupní hodnota není prázdná, zatímco deleteTodo funkce odebere konkrétní úkol ze seznamu na základě jeho indexu.

Nyní napište kód pro prvky JSX vykreslené na DOM prohlížeče.

vrátit se (


 typ="text"
 className={styles.input}
 value={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"add-todo">
 Přidat úkol
 </button>
"seznam úkolů">
 {todos.map((úkol, index) => (


 {dělat}
 </li>
 ))}
 </ul>
 {todos.map((úkol, index) => (


 onClick={() => deleteTodo (index)}
 className={styles.button}
 data-testid={`smazat-úkol-${index}`}
 >
 Vymazat
 </button>
 </div>
 ))}
 </div>
 );}

Psaní testovacích případů

Než začnete psát testovací případy, je důležité nakonfigurovat Jest podle vašich specifických požadavků na testování. To zahrnuje vytvoření a přizpůsobení jest.config.js soubor, který slouží jako základ pro vaše testovací nastavení.

V kořenovém adresáři vytvořte nový jest.config.js soubor. Poté přidejte následující kód pro odpovídající konfiguraci Jest:

konst nextJest = vyžadovat("další/žert");
konst createJestConfig = nextJest({
 dir: "./",
});
konst customJestConfig = {
 adresáře modulů: ["moduly_uzlů", "/"],
 testovací prostředí: "jest-environment-jsdom",
};
modul.exports = createJestConfig (customJestConfig);

Nakonec otevřete package.json soubor a přidejte nový skript s názvem test který provede příkaz jest --watchAll spustit všechny testovací případy a sledovat případné změny.

Po provedení aktualizace by vaše skripty měly vypadat takto:

"skripty": {
"dev": "další vývoj",
"stavět": "další stavba",
"Start": "příští start",
"žmolky": "další vlákna",
"test": "jest --watchAll"
 },

S nastavenými konfiguracemi pokračujte v psaní a provádění testů.

Testování aplikace Next.js To-Do s Jest

V kořenovém adresáři projektu vytvořte novou složku s názvem __testy__. Jest vyhledá testovací soubory v této složce. V této složce vytvořte nový soubor s názvem index.test.js.

Nejprve proveďte následující importy.

import Domov z"../src/pages/index";
import"@testing-library/jest-dom";
import { fireEvent, render, screen, waitFor, act } z"@testing-library/react";

Napište test, abyste zjistili, zda se všechny prvky vykreslují správně:

popsat("Aplikace Todo", () => {
 to("vykreslí aplikaci todo", () => {
 poskytnout(<Domov />);

 očekávat (screen.getByTestId("todo-input")).toBeInTheDocument();
 očekávat (screen.getByTestId("add-todo")).toBeInTheDocument();
 });
});

Testovací případ ověřuje, že se aplikace To-Do a její prvky vykreslují správně. Uvnitř testovacího případu je Domov komponenta je vykreslena pomocí poskytnout funkce z testovací knihovny.

Poté jsou tvrzení provedena pomocí očekávat funkce, která zajistí, že konkrétní prvky s testovacími ID, jako je např todo-input jsou přítomny ve vykresleném výstupu. Pokud jsou tyto prvky v DOM nalezeny, test projde; jinak selže.

Nyní spusťte následující příkaz pro provedení testu.

test běhu npm

Pokud test projde, měli byste vidět podobnou odpověď.

Testování různých akcí a simulace chyb

Popište tyto testovací případy, abyste ověřili funkčnost funkcí Add To-Do a Delete To-Do.

Začněte napsáním testovacího případu pro funkci Add To-Do.

 to("přidá úkol", asynchronní () => {
 poskytnout(<Domov />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("add-todo");
konst todoList = screen.getByTestId("seznam úkolů");
čekat akt(asynchronní () => {
 fireEvent.change (todoInput, { cílová: { hodnota: "Nový úkol" } });
 addTodoButton.click();
 });
čekat čekat na(() => {
 očekávat (todoList).toHaveTextContent("Nový úkol");
 });
 });

Fragment kódu výše simuluje interakci uživatele zadáním do vstupního pole a kliknutím na tlačítko Přidat. Poté pomocí falešné vstupní hodnoty úkolu ověří, zda byla vstupní hodnota úspěšně přidána do seznamu úkolů.

Uložte soubor a zkontrolujte terminál. Test by se měl automaticky znovu spustit a odhlásit podobné výsledky testu.

Chcete-li simulovat chybu testu, upravte ID testu tlačítka Přidat a spusťte test znovu. S touto aktualizací by měl test selhat a odhlásit chybovou zprávu označující konkrétní zjištěnou chybu.

V ideálním případě ve větší kódové základně s více přispěvateli provádějícími časté změny hraje testování zásadní roli při identifikaci potenciálních chyb, které by mohly vést k selhání systému. Testováním můžete snadno označit nesrovnalosti, jako je ta ukázaná výše, a vyřešit je během vývoje.

Nakonec napište testovací případ pro funkci Delete To-Do.

 to("smaže úkol", asynchronní () => {
 poskytnout(<Domov />);

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

 fireEvent.change (todoInput, { cílová: { hodnota: "Úkol 1" } });
 fireEvent.click (addTodoButton);

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

konst todoList = screen.getByTestId("seznam úkolů");
čekat čekat na(() => {
 očekávat (todoList).toBeEmptyDOMElement();
 });
 });

Znovu ověří, zda byl úkol úspěšně odstraněn. Uložte soubor pro provedení testu.

Testování jednotek pomocí Jest

Tato příručka vám poskytla znalosti pro psaní a provádění jednoduchých jednotkových testů, jako příklad používá komponentu To-Do. Chcete-li zajistit stabilitu a spolehlivost základních funkcí vaší aplikace a snížit pravděpodobnost výskytu neočekávané problémy v produkčním prostředí, je důležité upřednostnit psaní testů pro váš klíč komponenty.

Kromě toho můžete svůj přístup k testování vylepšit začleněním testů snímků a testů end-to-end.