Kaip išbandyti Next.js programas naudojant Jest

Pagrindinis bet kurio kūrimo proceso tikslas yra sukurti gamybai paruoštas programas. Norint tai pasiekti, būtina parašyti kodą, kuris ne tik atitiktų funkcinius reikalavimus, bet ir laikui bėgant išliktų stabilus ir patikimas. Testavimas yra apsaugos priemonė, užtikrinanti, kad programos veiktų taip, kaip tikėtasi, net jei kūrimo metu atliekami nauji atnaujinimai.

Nors išsamių testų, apimančių įvairius kraštutinius atvejus, rašymas gali užtrukti daug laiko, tai padeda pažymėti ir išspręsti problemas, kol jos pasiekia gamybos aplinką.

„Next.js“ programų testavimas

Testų rašymas yra esminis ir dažnai neįvertinamas patikimų programų kūrimo aspektas. Nesunku pakliūti į pagundą išsiųsti kodą tiesiai į gamybą, pasikliaujant įsitikinimu, kad „jūs sukūrėte kodą, todėl jis turi veikti!

Tačiau šis metodas gali sukelti nenumatytų problemų ir klaidų gamybos aplinkoje. Todėl testu pagrįsto kūrimo (TDD) metodo taikymas gali padėti maksimaliai pasitikėti savo kodu ir sumažinti sugaištą laiką.

Kas yra Jestas?

Juokas yra populiari testavimo sistema, kurią plačiai naudoja įvairios JavaScript karkasai. Jame pateikiamas testavimo funkcijų rinkinys, pvz., galingas bandymų vykdytojas, automatinis tyčiojimasis ir momentinių nuotraukų testavimas.

Idealiu atveju šios funkcijos yra naudingos norint pasiekti visapusišką bandymų aprėptį ir užtikrinti jūsų programos patikimumą įvairių tipų testai.

Sukurkite „Next.js To-Do“ programą

Dabar įsigilinkime į vienetų testų vykdymą Next.js programoje naudojant Jest. Tačiau prieš pradėdami sukurkite Next.js projektą ir įdiekite reikiamas priklausomybes.

Norėdami pradėti, atlikite šiuos veiksmus:

1. Sukurkite naują Next.js projektą savo terminale paleisdami šią komandą:

   npx Create-next-app@latest test-tutorial

2. Sukūrę projektą, eikite į projekto katalogą vykdydami:

   cd nextjs-test-tutorial

3. Įdiekite reikiamas priklausomybes kaip devpriklausomybės paleisdami šią komandą:

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

Sukūrę projektą ir įdiegę priklausomybes, dabar esate pasirengę kurti Next.js programą ir rašyti vienetų testus naudodami Jest.

Sukurkite „To-Do“ komponentą

Viduje /src projekto katalogą, atidarykite pages/index.js failą, ištrinkite esamą pagrindinį Next.js kodą ir pridėkite šį kodą.

Pirmiausia atlikite šiuos importavimus ir nustatykite dvi funkcijas, kurios valdys vartotojo užduotis: addTodo funkcija ir deleteTodo funkcija.

importuoti { useState } iš"reaguoti";
importuoti stiliai iš"../styles/Home.module.css";
eksportuotinumatytasfunkcijaNamai() {
konst [todos, setTodos] = useState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
jeigu (newTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (atnaujintasTodos);
 setNewTodo("");
 }
 };
konst deleteTodo = (indeksas) => {
konst updatedTodos = [...todos];
 updatedTodos.splice (indeksas, 1);
 setTodos (atnaujintasTodos);
 };

Kodas naudoja useState kabliukas būsenos kintamiesiems inicijuoti ir atnaujinti: todos ir newTodo. The addTodo funkcija prideda naują užduočių sąrašą į darbų sąrašą, kai įvesties reikšmė nėra tuščia, o deleteTodo funkcija pašalina konkretų darbą iš sąrašo pagal jo indeksą.

Dabar parašykite JSX elementų kodą, pateiktą naršyklės DOM.

grąžinti (


 tipas ="tekstas"
 className={styles.input}
 value={newTodo}
 data-testid=„todo-input“
 onChange={(e) => setNewTodo (e.target.value)}
 />
"pridėti-todo">
 Pridėti Todo
 </button>
"darbų sąrašas">
 {todos.map((todo, indeksas) => (


 {daryti}
 </li>
 ))}
 </ul>
 {todos.map((todo, indeksas) => (


 onClick={() => deleteTodo (indeksas)}
 className={styles.button}
 data-testid={`ištrinti-todo-${index}`}
 >
 Ištrinti
 </button>
 </div>
 ))}
 </div>
 );}

Testo atvejų rašymas

Prieš pradedant rašyti bandomuosius atvejus, labai svarbu sukonfigūruoti Jest pagal konkrečius testavimo reikalavimus. Tai apima kūrimą ir pritaikymą jest.config.js failą, kuris yra jūsų testavimo sąrankos pagrindas.

Šakniniame kataloge sukurkite naują jest.config.js failą. Tada pridėkite šį kodą, kad atitinkamai sukonfigūruotumėte Jest:

konst nextJest = reikalauti("kitas/juokas");
konst createJestConfig = nextJest({
 rež.: "./",
});
konst customJestConfig = {
 moduleKatalogai: ["mazgas_moduliai", "/"],
 testo aplinka: "juokas-aplinka-jsdom",
};
modulis.exports = createJestConfig (customJestConfig);

Galiausiai atidarykite package.json failą ir pridėkite naują scenarijų, vadinamą bandymas kuri vykdys komandą pokštas -- žiūrėti viską paleisti visus bandomuosius atvejus ir stebėti bet kokius pakeitimus.

Atnaujinus jūsų scenarijus turėtų atrodyti taip:

"scenarijai": {
"dev": "kitas kūrėjas",
"statyti": "kitas statinys",
"pradėti": "kita pradžia",
"pūkas": "kitas pūkas",
"bandymas": "juokas -- žiūrėti viską"
 },

Kai konfigūracijos yra nustatytos, tęskite testų rašymą ir vykdymą.

„Next.js To-Do“ programos testavimas naudojant „Jest“.

Projekto šakniniame kataloge sukurkite naują aplanką pavadinimu __testai__. „Jest“ ieškos bandomųjų failų šiame aplanke. Šiame aplanke sukurkite naują failą pavadinimu index.test.js.

Pirmiausia importuokite toliau nurodytus veiksmus.

importuoti Namai iš"../src/pages/index";
importuoti„@testing-library/jest-dom“;
importuoti { fireEvent, render, screen, waitFor, act } iš„@testavimo-biblioteka/reaguoti“;

Parašykite testą, kad pamatytumėte, ar visi elementai atvaizduojami teisingai:

apibūdinti(„Todo App“, () => {
 tai („pateikia todo programą“, () => {
 render (<Namai />);

 tikėtis (screen.getByTestId(„todo-input“)).toBeInTheDocument();
 tikėtis (screen.getByTestId("pridėti-todo")).toBeInTheDocument();
 });
});

Bandomasis atvejis patikrina, ar programa „To-Do“ ir jos elementai pateikiami tinkamai. Bandomojo korpuso viduje Namai komponentas atvaizduojamas naudojant pateikti funkcija iš testavimo bibliotekos.

Tada teiginiai pateikiami naudojant tikėtis funkcija, užtikrinanti, kad konkretūs elementai su bandymo ID, pvz todo-įvestis yra pateikiamoje išvestyje. Jei šie elementai randami DOM, testas praeina; kitu atveju nepavyks.

Dabar paleiskite šią komandą, kad atliktumėte testą.

npm paleidimo testas

Turėtumėte matyti panašų atsakymą, jei testas bus sėkmingas.

Įvairių veiksmų testavimas ir klaidų imitavimas

Apibūdinkite šiuos bandymo atvejus, kad patikrintumėte funkcijų „Pridėti užduotį“ ir „Ištrinti užduotį“ funkcionalumą.

Pradėkite parašydami funkcijos „Pridėti užduotį“ bandomąjį atvejį.

 tai ("prideda užduotį", async () => {
 render (<Namai />);

konst todoInput = screen.getByTestId(„todo-input“);
konst addTodoButton = screen.getByTestId("pridėti-todo");
konst todoList = screen.getByTestId("darbų sąrašas");
laukti veikti (async () => {
 fireEvent.change (todoInput, { taikinys: { vertė: "Naujas darbas" } });
 addTodoButton.click();
 });
laukti laukti(() => {
 tikėtis (todoList).toHaveTextContent("Naujas darbas");
 });
 });

Aukščiau pateiktas kodo fragmentas imituoja naudotojo sąveiką įvesdamas įvesties lauką ir spustelėdamas pridėjimo mygtuką. Tada, naudojant netikrą To-Do įvesties vertę, patikrinama, ar įvesties reikšmė sėkmingai įtraukta į darbų sąrašą.

Išsaugokite failą ir patikrinkite terminalą. Testas turėtų automatiškai paleisti iš naujo ir atjungti panašius testo rezultatus.

Norėdami imituoti bandymo klaidą, pakeiskite mygtuko pridėjimo testo ID ir paleiskite testą iš naujo. Naudojant šį naujinimą, bandymas turėtų nepavykti ir atsijungti bus rodomas klaidos pranešimas, nurodantis konkrečią aptiktą klaidą.

Idealiu atveju didesnėje kodų bazėje, kurioje dažnai keičiami keli bendradarbiai, testavimas atlieka lemiamą vaidmenį nustatant galimas klaidas, kurios gali sukelti sistemos gedimus. Bandydami galite lengvai pažymėti neatitikimus, pvz., parodytą aukščiau, ir juos pašalinti kūrimo metu.

Galiausiai parašykite bandomąjį atvejį, skirtą „Delete To-Do“ funkcijai.

 tai („ištrina užduotį“, async () => {
 render (<Namai />);

konst todoInput = screen.getByTestId(„todo-input“);
konst addTodoButton = screen.getByTestId("pridėti-todo");

 fireEvent.change (todoInput, { taikinys: { vertė: „Todo 1“ } });
 fireEvent.click (addTodoButton);

konst deleteTodoButton = screen.getByTestId("ištrinti-todo-0");
 fireEvent.click (deleteTodoButton);

konst todoList = screen.getByTestId("darbų sąrašas");
laukti laukti(() => {
 tikėtis (todoList).toBeEmptyDOMElement();
 });
 });

Vėlgi, jis patikrina, ar užduotis sėkmingai ištrinta. Išsaugokite failą, kad atliktumėte testą.

Įrenginio testavimas naudojant Jest

Šis vadovas suteikė jums žinių, kaip rašyti ir atlikti paprastus vienetų testus, kaip pavyzdį naudojant „To-Do“ komponentą. Siekiant užtikrinti pagrindinių programos funkcijų stabilumą ir patikimumą bei sumažinti tikimybę, kad netikėtų problemų gamybinėje aplinkoje, svarbu pirmenybę teikti rakto testų rašymui komponentai.

Be to, galite patobulinti savo testavimo metodą įtraukdami momentinius testus ir galutinius testus.