Next.js-sovellusten testaaminen Jestillä

Minkä tahansa kehitysprosessin ensisijaisena tavoitteena on rakentaa tuotantovalmiita sovelluksia. Tämän saavuttamiseksi on tärkeää kirjoittaa koodia, joka ei ainoastaan ​​täytä toiminnallisia vaatimuksia, vaan pysyy myös vakaana ja luotettavana ajan myötä. Testaus toimii turvana ja varmistaa, että sovellukset toimivat odotetusti, vaikka uusia päivityksiä tehdäänkin kehitysvaiheessa.

Vaikka kattavien testien kirjoittaminen, jotka kattavat erilaisia ​​reunatapauksia, voi viedä huomattavan paljon aikaa, se auttaa ilmoittamaan ja ratkaisemaan ongelmat ennen kuin ne saapuvat tuotantoympäristöihin.

Next.js-sovellusten testaus

Testien kirjoittaminen on olennainen ja usein aliarvioitu osa kestävien sovellusten kehittämistä. On helppo langeta kiusaukseen lähettää koodi suoraan tuotantoon luottaen siihen, että "olet kirjoittanut koodin, joten sen on toimittava!"

Tämä lähestymistapa voi kuitenkin johtaa odottamattomiin ongelmiin ja virheisiin tuotantoympäristöissä. Tämän seurauksena TDD (Testi-driven development) -lähestymistavan käyttöönotto voi auttaa maksimoimaan luottamuksesi koodiisi ja minimoimaan käytetyn ajan.

Mikä on Jest?

Jest on suosittu testauskehys, jota eri tahot käyttävät laajasti JavaScript-kehykset. Se tarjoaa joukon testausominaisuuksia, kuten tehokkaan testiajon, automaattisen pilkkaamisen ja tilannekuvatestauksen.

Ihannetapauksessa näistä ominaisuuksista on hyötyä kattavan testikattavuuden saavuttamisessa ja sovelluksesi luotettavuuden varmistamisessa erilaisia ​​testejä.

Luo Next.js-tehtäväsovellus

Tarkastellaan nyt yksikkötestien suorittamista Next.js-sovelluksessa Jestiä käyttämällä. Ennen kuin aloitat, luo kuitenkin Next.js-projekti ja asenna tarvittavat riippuvuudet.

Aloita seuraavasti:

1. Luo uusi Next.js-projekti suorittamalla seuraava komento päätteessäsi:

   npx create-next-app@ uusin testi-opastus

2. Kun olet luonut projektin, siirry projektihakemistoon suorittamalla:

   cd nextjs-test-tutorial

3. Asenna tarvittavat riippuvuudet as devDependencies suorittamalla seuraava komento:

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

Kun projekti on määritetty ja riippuvuudet asennettu, olet nyt valmis rakentamaan Next.js-sovelluksen ja kirjoittamaan yksikkötestejä Jestin avulla.

Luo tehtäväkomponentti

Vuonna /src projektihakemisto, avaa pages/index.js tiedosto, poista olemassa oleva yleiskuvaus Next.js-koodi ja lisää seuraava koodi.

Tee ensin seuraavat tuonnit ja määritä kaksi toimintoa, jotka hallitsevat käyttäjän tehtäviä: addTodo toiminto ja deleteTodo toiminto.

tuonti { useState } alkaen"reagoi";
tuonti tyylejä alkaen"../styles/Home.module.css";
viedäoletuksenatoimintoKoti() {
konst [todos, setTodos] = useState([]);
konst [newTodo, setNewTodo] = useState("");
konst addTodo = () => {
jos (uusiTodo.trim() !== "") {
konst updatedTodos = [...todos, newTodo];
 setTodos (päivitettyTodos);
 setNewTodo("");
 }
 };
konst deleteTodo = (indeksi) => {
konst updatedTodos = [...todos];
 updatedTodos.splice (indeksi, 1);
 setTodos (päivitettyTodos);
 };

Koodi hyödyntää useState koukku tilamuuttujien alustamiseen ja päivittämiseen: todos ja uusiTodo. The addTodo -toiminto lisää uuden tehtävän tehtäväluetteloon, kun syöttöarvo ei ole tyhjä, kun taas deleteTodo -toiminto poistaa tietyn tehtävän luettelosta sen indeksin perusteella.

Kirjoita nyt selaimen DOM: iin renderöityjen JSX-elementtien koodi.

palata (


 tyyppi="teksti"
 className={styles.input}
 value={newTodo}
 data-testid="tehtävä-syöttö"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"lisää-tehtävä">
 Lisää Todo
 </button>
"tehtävälista">
 {todos.map((tehtävä, indeksi) => (


 {tehdä}
 </li>
 ))}
 </ul>
 {todos.map((tehtävä, indeksi) => (


 onClick={() => deleteTodo (hakemisto)}
 className={styles.button}
 data-testid={`poista-tehtävä-${index}`}
 >
 Poistaa
 </button>
 </div>
 ))}
 </div>
 );}

Testitapausten kirjoittaminen

Ennen kuin alat kirjoittaa testitapauksia, on erittäin tärkeää määrittää Jest omien testausvaatimustesi mukaan. Tämä sisältää luomisen ja mukauttamisen jest.config.js tiedosto, joka toimii perustana testauskokoonpanollesi.

Luo juurihakemistoon uusi jest.config.js tiedosto. Lisää sitten seuraava koodi määrittääksesi Jest vastaavasti:

konst nextJest = vaatia("seuraava/leikki");
konst createJestConfig = nextJest({
 ohjaaja: "./",
});
konst customJestConfig = {
 moduleDirectories: ["solmu_moduulit", "/"],
 testiympäristössä: "jest-environment-jsdom",
};
moduuli.exports = createJestConfig (customJestConfig);

Avaa lopuksi package.json tiedosto ja lisää uusi komentosarja nimeltä testata joka suorittaa komennon vitsi -- katso kaikki suorittaaksesi kaikki testitapaukset ja tarkkaillaksesi muutoksia.

Päivityksen tekemisen jälkeen skriptien pitäisi näyttää tältä:

"käsikirjoitukset": {
"dev": "seuraava kehittäjä",
"rakentaa": "seuraava rakennus",
"alkaa": "seuraava alku",
"nukka": "seuraava nukka",
"testata": "jest --watchAll"
 },

Kun kokoonpanot ovat paikoillaan, jatka testien kirjoittamista ja suorittamista.

Next.js To-Do -sovelluksen testaus Jestillä

Luo projektin juurihakemistoon uusi kansio nimeltä __testit__. Jest etsii testitiedostoja tästä kansiosta. Luo tähän kansioon uusi tiedosto nimeltä index.test.js.

Tee ensin seuraavat tuonnit.

tuonti Koti alkaen"../src/pages/index";
tuonti"@testing-library/jest-dom";
tuonti { fireEvent, render, screen, waitFor, act } alkaen"@testauskirjasto/reagoi";

Kirjoita testi nähdäksesi, hahmontuvatko kaikki elementit oikein:

kuvaile ("Todo-sovellus", () => {
 se("renderöi todo-sovelluksen", () => {
 render(<Koti />);

 odottaa (screen.getByTestId("tehtävä-syöttö")).toBeInTheDocument();
 odottaa (screen.getByTestId("lisää-tehtävä")).toBeInTheDocument();
 });
});

Testitapaus varmistaa, että To-Do-sovellus ja sen elementit hahmontuvat oikein. Testikotelon sisällä Koti komponentti renderöidään käyttämällä renderöi toiminto testauskirjastosta.

Sitten väitteet tehdään käyttämällä odottaa toiminto varmistaaksesi, että tietyt testitunnuksilla varustetut elementit, kuten todo-syöttö ovat läsnä renderoidussa tulosteessa. Jos nämä elementit löytyvät DOM: sta, testi läpäisee; muuten se epäonnistuu.

Suorita testi nyt suorittamalla seuraava komento.

npm-ajotesti

Sinun pitäisi nähdä samanlainen vastaus, jos testi läpäisee.

Erilaisten toimien testaus ja virheiden simulointi

Kuvaa nämä testitapaukset, joilla voit varmistaa Lisää tehtävät- ja Poista tehtävät -ominaisuuksien toimivuuden.

Aloita kirjoittamalla testitapaus Add To-Do -toiminnolle.

 se("lisää tehtävän", asynk () => {
 render(<Koti />);

konst todoInput = screen.getByTestId("tehtävä-syöttö");
konst addTodoButton = screen.getByTestId("lisää-tehtävä");
konst todoList = screen.getByTestId("tehtävälista");
odottaa toimia(asynk () => {
 fireEvent.change (todoInput, { kohde: { arvo: "Uusi tehtävä" } });
 addTodoButton.click();
 });
odottaa odottaa(() => {
 odottaa (todoList).toHaveTextContent("Uusi tehtävä");
 });
 });

Yllä oleva koodinpätkä simuloi käyttäjän vuorovaikutusta kirjoittamalla syöttökenttään ja napsauttamalla Lisää-painiketta. Sitten käyttämällä valetehtävän syöttöarvoa se tarkistaa, onko syöttöarvo lisätty onnistuneesti To-Do-luetteloon.

Tallenna tiedosto ja tarkista pääte. Testin tulee suorittaa automaattisesti uudelleen ja kirjata ulos samanlaiset testitulokset.

Jos haluat simuloida testivirhettä, muokkaa lisäyspainikkeen testitunnusta ja suorita testi uudelleen. Tämän päivityksen yhteydessä testin pitäisi epäonnistua ja kirjautua ulos virhesanomasta, joka ilmaisee havaitun virheen.

Ihannetapauksessa suuremmassa koodikannassa, jossa useat osallistujat tekevät usein muutoksia, testaus on ratkaisevassa roolissa mahdollisten virheiden tunnistamisessa, jotka voivat johtaa järjestelmävirheisiin. Testaamalla voit helposti merkitä yllä esitetyn kaltaiset epäjohdonmukaisuudet ja ratkaista ne kehityksen aikana.

Kirjoita lopuksi Delete To-Do -toiminnon testitapaus.

 se("poistaa tehtävän", asynk () => {
 render(<Koti />);

konst todoInput = screen.getByTestId("tehtävä-syöttö");
konst addTodoButton = screen.getByTestId("lisää-tehtävä");

 fireEvent.change (todoInput, { kohde: { arvo: "Todo 1" } });
 fireEvent.click (addTodoButton);

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

konst todoList = screen.getByTestId("tehtävälista");
odottaa odottaa(() => {
 odottaa (todoList).toBeEmptyDOMElement();
 });
 });

Jälleen se tarkistaa, onko tehtävä poistettu onnistuneesti. Tallenna tiedosto suorittaaksesi testin.

Yksikkötestaus Jestillä

Tämä opas on antanut sinulle tietoa yksinkertaisten yksikkötestien kirjoittamisesta ja suorittamisesta käyttämällä esimerkkinä To-Do-komponenttia. Varmistaaksesi sovelluksesi ydinominaisuuksien vakauden ja luotettavuuden ja vähentääksesi mahdollisuuksia odottamattomia ongelmia tuotantoympäristöissä, on tärkeää priorisoida avaimesi testien kirjoittaminen komponentit.

Lisäksi voit parantaa testaustapaasi sisällyttämällä siihen tilannekuvatestejä ja päästä päähän -testejä.