Kā pārbaudīt Next.js lietojumprogrammas, izmantojot Jest

Jebkura izstrādes procesa galvenais mērķis ir izveidot ražošanai gatavas lietojumprogrammas. Lai to panāktu, ir svarīgi uzrakstīt kodu, kas ne tikai atbilst funkcionālajām prasībām, bet arī laika gaitā paliek stabils un uzticams. Testēšana kalpo kā aizsardzība, nodrošinot, ka lietojumprogrammas darbojas, kā paredzēts, pat ja izstrādes laikā tiek veikti jauni atjauninājumi.

Lai gan visaptverošu testu rakstīšana, kas ietver dažādus malas gadījumus, var aizņemt daudz laika, tas palīdz atzīmēt un atrisināt problēmas, pirms tās nonāk ražošanas vidē.

Next.js lietojumprogrammu testēšana

Testu rakstīšana ir būtisks un bieži vien nepietiekami novērtēts aspekts spēcīgu lietojumprogrammu izstrādē. Ir viegli krist kārdinājumam nosūtīt kodu tieši uz ražošanu, paļaujoties uz pārliecību, ka "jūs esat koda autors, tāpēc tam ir jādarbojas!"

Tomēr šī pieeja var radīt neparedzētas problēmas un kļūdas ražošanas vidēs. Rezultātā testu vadītas izstrādes (TDD) pieejas izmantošana var palīdzēt palielināt jūsu pārliecību par savu kodu un samazināt patērēto laiku.

Kas ir Džests?

Joks ir populāra testēšanas sistēma, ko plaši izmanto dažādi JavaScript ietvari. Tas nodrošina testēšanas funkciju komplektu, piemēram, jaudīgu testa programmu, automātisku ņirgāšanos un momentuzņēmumu testēšanu.

Ideālā gadījumā šīs funkcijas ir noderīgas, lai sasniegtu visaptverošu testu pārklājumu un nodrošinātu jūsu lietojumprogrammas uzticamību visās jomās. dažāda veida pārbaudes.

Izveidojiet Next.js uzdevumu lietojumprogrammu

Tagad iedziļināsimies vienību testu izpildes procesā Next.js lietojumprogrammā, izmantojot Jest. Tomēr, pirms sākat, izveidojiet Next.js projektu un instalējiet vajadzīgās atkarības.

Lai sāktu, veiciet tālāk norādītās darbības.

1. Izveidojiet jaunu Next.js projektu, terminālī izpildot šādu komandu:

   npx Create-next-app@jaunākā testa apmācība

2. Pēc projekta izveides pārejiet uz projekta direktoriju, izpildot:

   cd nextjs-test-tutorial

3. Instalējiet nepieciešamās atkarības kā devAtkarības izpildot šādu komandu:

   npm instalēt npm instalēt --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Kad projekts ir iestatīts un atkarības ir instalētas, tagad esat gatavs izveidot lietojumprogrammu Next.js un rakstīt vienību testus, izmantojot Jest.

Izveidojiet uzdevumu komponentu

Iekš /src projektu direktorijā, atveriet pages/index.js failu, izdzēsiet esošo standarta Next.js kodu un pievienojiet šādu kodu.

Vispirms veiciet tālāk norādītās importēšanas un definējiet divas funkcijas, kas pārvaldīs lietotāja uzdevumus: addTodo funkcija un deleteTodo funkciju.

imports { useState } no"reaģēt";
imports stilus no"../styles/Home.module.css";
eksportētnoklusējumafunkcijuMājas() {
konst [todos, setTodos] = useState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
ja (newTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (atjauninātsTodos);
 setNewTodo("");
 }
 };
konst deleteTodo = (rādītājs) => {
konst updatedTodos = [...todos];
 updatedTodos.splice (indekss, 1);
 setTodos (atjauninātsTodos);
 };

Kods izmanto useState āķis, lai inicializētu un atjauninātu stāvokļa mainīgos: todos un jaunsTodo. The addTodo funkcija pievieno uzdevumu sarakstam jaunu uzdevumu, ja ievades vērtība nav tukša, savukārt deleteTodo funkcija noņem konkrētu uzdevumu no saraksta, pamatojoties uz tā indeksu.

Tagad ierakstiet pārlūkprogrammas DOM atveidoto JSX elementu kodu.

atgriezties (


 tips="teksts"
 className={styles.input}
 value={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"pievienot-todo">
 Pievienot uzdevumu
 </button>
"darāmo lietu saraksts">
 {todos.map((todo, indekss) => (


 {darīt}
 </li>
 ))}
 </ul>
 {todos.map((todo, indekss) => (


 onClick={() => deleteTodo (indekss)}
 className={styles.button}
 data-testid={`dzēst-todo-${index}`}
 >
 Dzēst
 </button>
 </div>
 ))}
 </div>
 );}

Pārbaudes gadījumu rakstīšana

Pirms sākat rakstīt testa gadījumus, ir ļoti svarīgi konfigurēt Jest atbilstoši jūsu īpašajām testēšanas prasībām. Tas ietver izveidi un pielāgošanu jest.config.js failu, kas kalpo par pamatu jūsu testēšanas iestatīšanai.

Saknes direktorijā izveidojiet jaunu jest.config.js failu. Pēc tam pievienojiet šo kodu, lai atbilstoši konfigurētu Jest:

konst nextJest = pieprasīt("nākamais/joks");
konst createJestConfig = nextJest({
 rež.: "./",
});
konst customJestConfig = {
 moduleDirectories: ["node_modules", "/"],
 testa vide: "jest-environment-jsdom",
};
modulis.exports = createJestConfig (customJestConfig);

Visbeidzot atveriet pack.json failu un pievienojiet jaunu skriptu ar nosaukumu pārbaude kas izpildīs komandu joks -- skatīties visu lai palaistu visas pārbaudes lietas un uzraudzītu izmaiņas.

Pēc atjaunināšanas jūsu skriptiem vajadzētu izskatīties šādi:

"skripti": {
"izstrādātājs": "nākamais izstrādātājs",
"būvēt": "nākamā būve",
"sākt": "nākamais sākums",
"plūksna": "nākamā pūka",
"pārbaude": "joks -- skatīties visu"
 },

Kad konfigurācijas ir izveidotas, turpiniet ar testu rakstīšanu un izpildi.

Lietotnes Next.js To-Do testēšana ar Jest

Projekta saknes direktorijā izveidojiet jaunu mapi ar nosaukumu __testi__. Jest meklēs testa failus šajā mapē. Šajā mapē izveidojiet jaunu failu ar nosaukumu index.test.js.

Vispirms veiciet šādu importēšanu.

imports Mājas no"../src/pages/index";
imports"@testing-library/jest-dom";
imports { fireEvent, render, screen, waitFor, act } no"@testing-library/react";

Uzrakstiet testu, lai redzētu, vai visi elementi tiek renderēti pareizi:

aprakstīt ("Todo App", () => {
 tas ("renderē lietotni Todo", () => {
 render(<Mājas />);

 sagaidīt (screen.getByTestId("todo-input")).toBeInTheDocument();
 sagaidīt (screen.getByTestId("pievienot-todo")).toBeInTheDocument();
 });
});

Testa gadījums pārbauda, ​​vai lietotne To-Do un tās elementi tiek renderēti pareizi. Testa korpusa iekšpusē Mājas komponents tiek renderēts, izmantojot renderēt funkciju no testēšanas bibliotēkas.

Pēc tam apgalvojumi tiek izteikti, izmantojot gaidīt funkcija, lai nodrošinātu konkrētu elementu ar testa ID, piemēram, todo-ievade atrodas renderētajā izvadā. Ja šie elementi ir atrasti DOM, tests iztur; pretējā gadījumā tas neizdodas.

Tagad palaidiet šo komandu, lai izpildītu pārbaudi.

npm palaišanas tests

Ja tests ir izturējis, jums vajadzētu redzēt līdzīgu atbildi.

Dažādu darbību pārbaude un kļūdu simulēšana

Aprakstiet šos testa gadījumus, lai pārbaudītu funkciju Pievienot uzdevumu un Dzēst uzdevumu funkcionalitāti.

Sāciet, rakstot funkcionalitātes Pievienot uzdevumu testu.

 tas ("pievieno uzdevumu", asinhrons () => {
 render(<Mājas />);

konst todoInput = screen.getByTestId("todo-input");
konst addTodoButton = screen.getByTestId("pievienot-todo");
konst todoList = screen.getByTestId("darāmo lietu saraksts");
gaidīt tēlot(asinhrons () => {
 fireEvent.change (todoInput, { mērķis: { vērtību: "Jaunais uzdevums" } });
 addTodoButton.click();
 });
gaidīt gaidīt(() => {
 gaidīt (todoList).toHaveTextContent("Jaunais uzdevums");
 });
 });

Iepriekš minētais koda fragments simulē lietotāja mijiedarbību, ierakstot ievades laukā un noklikšķinot uz pievienošanas pogas. Pēc tam, izmantojot fiktīvu To-Do ievades vērtību, tas pārbauda, ​​vai ievades vērtība ir veiksmīgi pievienota uzdevumu sarakstam.

Saglabājiet failu un pārbaudiet termināli. Testam ir automātiski jāatkārto un jāatsakās no līdzīgiem testa rezultātiem.

Lai simulētu testa kļūdu, modificējiet pievienošanas pogas testa ID un atkārtojiet testu. Izmantojot šo atjauninājumu, pārbaudei vajadzētu neizdoties, un tiks parādīts kļūdas ziņojums, kas norāda konkrēto konstatēto kļūdu.

Ideālā gadījumā lielākā kodu bāzē, kurā vairāki līdzstrādnieki veic biežas izmaiņas, testēšanai ir izšķiroša nozīme, lai identificētu iespējamās kļūdas, kas varētu izraisīt sistēmas kļūmes. Pārbaudot, varat viegli atzīmēt neatbilstības, piemēram, iepriekš parādītās, un novērst tās izstrādes laikā.

Visbeidzot, uzrakstiet funkcionalitātes Dzēst uzdevumu testu.

 tas ("izdzēš uzdevumu", asinhrons () => {
 render(<Mājas />);

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

 fireEvent.change (todoInput, { mērķis: { vērtību: "Todo 1" } });
 fireEvent.click (addTodoButton);

konst deleteTodoButton = screen.getByTestId("dzēst-todo-0");
 fireEvent.click (deleteTodoButton);

konst todoList = screen.getByTestId("darāmo lietu saraksts");
gaidīt gaidīt(() => {
 gaidīt (todoList).toBeEmptyDOMElement();
 });
 });

Atkal, tas pārbauda, ​​vai uzdevums ir veiksmīgi izdzēsts. Saglabājiet failu, lai izpildītu pārbaudi.

Vienības pārbaude, izmantojot Jest

Šī rokasgrāmata ir nodrošinājusi jums zināšanas, kā rakstīt un izpildīt vienkāršus vienību testus, kā piemēru izmantojot komponentu To-Do. Lai nodrošinātu jūsu lietojumprogrammas pamatfunkciju stabilitāti un uzticamību un samazinātu iespēju neparedzētas problēmas ražošanas vidēs, ir svarīgi noteikt atslēgas testu rakstīšanas prioritāti sastāvdaļas.

Turklāt varat uzlabot savu testēšanas pieeju, iekļaujot momentuzņēmuma testus un pilnīgus testus.