Next.js-applicaties testen met Jest

Het primaire doel van elk ontwikkelingsproces is het bouwen van toepassingen die klaar zijn voor productie. Om dit te bereiken, is het essentieel om code te schrijven die niet alleen voldoet aan de functionele vereisten, maar ook stabiel en betrouwbaar blijft in de tijd. Testen dient als beveiliging en zorgt ervoor dat applicaties functioneren zoals verwacht, zelfs als er nieuwe updates worden gemaakt tijdens de ontwikkeling.

Hoewel het schrijven van uitgebreide tests die verschillende randgevallen omvatten, veel tijd kan kosten, helpt het om problemen te signaleren en op te lossen voordat ze productieomgevingen bereiken.

Next.js-applicaties testen

Het schrijven van tests is een essentieel en vaak onderschat aspect bij het ontwikkelen van robuuste applicaties. Het is gemakkelijk om in de verleiding te komen om code rechtstreeks naar productie te sturen, vertrouwend op de overtuiging dat "jij de code hebt geschreven, dus het moet werken!"

Deze aanpak kan echter leiden tot onvoorziene problemen en bugs in productieomgevingen. Als gevolg hiervan kan het toepassen van een testgestuurde ontwikkelingsbenadering (TDD) u helpen uw vertrouwen in uw code te maximaliseren en de tijd die u kwijt bent te minimaliseren. debuggen en oplossen van kleine bugs dat had kunnen afglijden naar productie.

Wat is grap?

Grap is een populair testraamwerk dat veel wordt gebruikt door verschillende JavaScript-frameworks. Het biedt een reeks testfuncties, zoals een krachtige testrunner, automatische spot en snapshot-testen.

In het ideale geval zijn deze functies handig bij het bereiken van een uitgebreide testdekking en het waarborgen van de betrouwbaarheid van uw toepassing verschillende soorten testen.

Maak een Next.js To-Do-toepassing

Laten we ons nu verdiepen in het proces van het uitvoeren van unit-tests op een Next.js-toepassing met behulp van Jest. Maak echter voordat u begint een Next.js-project en installeer de vereiste afhankelijkheden.

Volg deze stappen om aan de slag te gaan:

1. Maak een nieuw Next.js-project door de volgende opdracht in uw terminal uit te voeren:

   npx create-next-app@latest test-tutorial

2. Navigeer na het maken van het project naar de projectdirectory door het volgende uit te voeren:

   cd nextjs-test-tutorial

3. Installeer de benodigde afhankelijkheden als devAfhankelijkheden door het volgende commando uit te voeren:

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

Nu het project is opgezet en de afhankelijkheden zijn geïnstalleerd, bent u nu klaar om de Next.js-toepassing te bouwen en unit-tests te schrijven met Jest.

Maak de takencomponent

In de /src projectdirectory, open het pagina's/index.js bestand, verwijder de bestaande boilerplate Next.js-code en voeg de volgende code toe.

Maak eerst de volgende imports en definieer twee functies die gebruikerstaken zullen beheren: addTodo functie en deleteTodo functie.

importeren { useState } van"Reageer";
importeren stijlen van"../styles/Home.module.css";
exporterenstandaardfunctieThuis() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
const addTodo = () => {
als (newTodo.trim() !== "") {
const updatedTodos = [...todos, nieuweTodo];
 setTodos (bijgewerktTodos);
 stelNieuwTodo("");
 }
 };
const deleteTodo = (inhoudsopgave) => {
const bijgewerktTodos = [...todos];
 updatedTodos.splice (index, 1);
 setTodos (bijgewerktTodos);
 };

De code maakt gebruik van de gebruikState hook om de statusvariabelen te initialiseren en bij te werken: taken En nieuwTodo. De addTodo functie voegt een nieuwe taak toe aan de takenlijst wanneer de invoerwaarde niet leeg is, terwijl de deleteTodo functie verwijdert een specifieke taak uit de lijst op basis van de index.

Schrijf nu de code voor de JSX-elementen die worden weergegeven in de DOM van de browser.

opbrengst (


 type="tekst"
 className={styles.input}
 waarde={newTodo}
 data-testid="todo-invoer"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"add-todo">
 Todo toevoegen
 </button>
"te doen lijst">
 {todos.map((doe, index) => (


 {Te doen}
 </li>
 ))}
 </ul>
 {todos.map((doe, index) => (


 onClick={() => deleteTodo (index)}
 className={styles.button}
 data-testid={`wissen-todo-${index}`}
 >
 Verwijderen
 </button>
 </div>
 ))}
 </div>
 );}

Testcases schrijven

Voordat u begint met het schrijven van testcases, is het cruciaal om Jest te configureren volgens uw specifieke testvereisten. Dit omvat het maken en aanpassen van de jest.config.js bestand, dat dient als basis voor uw testconfiguratie.

Maak in de hoofdmap een nieuw jest.config.js bestand. Voeg vervolgens de volgende code toe om Jest dienovereenkomstig te configureren:

const volgendeGrapje = vereisen("volgende/grapje");
const createJestConfig = volgendeJest({
 richt: "./",
});
const customJestConfig = {
 moduleDirectories: ["node_modules", "/"],
 test omgeving: "grapje-omgeving-jsdom",
};
moduul.exports = createJestConfig (aangepasteJestConfig);

Open ten slotte de pakket.json bestand en voeg een nieuw script toe met de naam test die de opdracht zal uitvoeren grap --watchAll om alle testcases uit te voeren en te letten op eventuele wijzigingen.

Na het uitvoeren van de update zouden uw scripts er als volgt uit moeten zien:

"scripts": {
"ontwikkelaar": "volgende ontwikkelaar",
"bouwen": "volgende bouw",
"begin": "volgende start",
"lint": "volgende pluis",
"test": "grapje --watchAll"
 },

Met de configuraties op zijn plaats, gaat u verder met het schrijven en uitvoeren van tests.

De Next.js To-Do-app testen met Jest

Maak in de hoofdmap van het project een nieuwe map met de naam __testen__. Jest zoekt testbestanden op in deze map. Maak in deze map een nieuw bestand met de naam index.test.js.

Voer eerst de volgende invoer uit.

importeren Thuis van"../src/pages/index";
importeren"@testbibliotheek/grapje";
importeren { fireEvent, render, screen, waitFor, act } van"@testbibliotheek/reageren";

Schrijf een test om te zien of alle elementen correct worden weergegeven:

beschrijven("Todo-app", () => {
 Het("geeft de todo-app weer", () => {
 veroorzaken(<Thuis />);

 verwachten (screen.getByTestId("todo-invoer")).toBeInTheDocument();
 verwachten (screen.getByTestId("add-todo")).toBeInTheDocument();
 });
});

De testcase verifieert dat de To-Do-app en de bijbehorende elementen correct worden weergegeven. In de testcase, de Thuis component wordt weergegeven met behulp van de veroorzaken functie uit de testbibliotheek.

Vervolgens worden beweringen gedaan met behulp van de verwachten functie om ervoor te zorgen dat specifieke elementen met test-ID's, zoals todo-invoer zijn aanwezig in de gerenderde uitvoer. Als deze elementen in de DOM worden gevonden, is de test geslaagd; anders mislukt het.

Voer nu de volgende opdracht uit om de test uit te voeren.

npm-run-test

U zou een soortgelijk antwoord moeten zien als de test slaagt.

Verschillende acties testen en fouten simuleren

Beschrijf deze testcases om de functionaliteit van de functies To-Do toevoegen en To-do verwijderen te verifiëren.

Begin met het schrijven van de testcase voor de Add To-Do functionaliteit.

 Het("voegt een taak toe", asynchroon () => {
 veroorzaken(<Thuis />);

const todoInput = scherm.getByTestId("todo-invoer");
const addTodoButton = scherm.getByTestId("add-todo");
const todoList = scherm.getByTestId("te doen lijst");
wachten handeling(asynchroon () => {
 fireEvent.change (todoInput, { doel: { waarde: "Nieuwe opdracht" } });
 addTodoButton.klik();
 });
wachten wachten op(() => {
 expect (todoList).toHaveTextContent("Nieuwe opdracht");
 });
 });

Het bovenstaande codefragment simuleert gebruikersinteractie door in een invoerveld te typen en op de knop Toevoegen te klikken. Vervolgens wordt met behulp van een nagebootste To-Do-invoerwaarde gecontroleerd of de invoerwaarde met succes is toegevoegd aan de To-Do-lijst.

Sla het bestand op en controleer de terminal. De test zou automatisch opnieuw moeten worden uitgevoerd en vergelijkbare testresultaten moeten worden uitgelogd.

Om een ​​testfout te simuleren, wijzigt u de test-ID van de knop Toevoegen en voert u de test opnieuw uit. Met deze update zou de test moeten mislukken en zou er een foutmelding moeten verschijnen die de specifieke fout aangeeft.

Idealiter speelt testen in een grotere codebase met meerdere bijdragers die regelmatig wijzigingen aanbrengen een cruciale rol bij het identificeren van potentiële bugs die kunnen leiden tot systeemstoringen. Door te testen, kunt u gemakkelijk inconsistenties signaleren, zoals hierboven gedemonstreerd, en deze tijdens de ontwikkeling oplossen.

Schrijf ten slotte de testcase voor de functionaliteit Verwijder taken.

 Het("verwijdert een taak", asynchroon () => {
 veroorzaken(<Thuis />);

const todoInput = scherm.getByTestId("todo-invoer");
const addTodoButton = scherm.getByTestId("add-todo");

 fireEvent.change (todoInput, { doel: { waarde: "Todo 1" } });
 fireEvent.klik (addTodoButton);

const deleteTodoButton = scherm.getByTestId("verwijder-todo-0");
 fireEvent.klik (deleteTodoButton);

const todoList = scherm.getByTestId("te doen lijst");
wachten wachten op(() => {
 verwachten (todoList).toBeEmptyDOMElement();
 });
 });

Nogmaals, het verifieert of de taak succesvol is verwijderd. Sla het bestand op om de test uit te voeren.

Eenheid testen met Jest

Deze gids heeft je de kennis gegeven om eenvoudige unit tests te schrijven en uit te voeren, met een To-Do component als voorbeeld. Om de stabiliteit en betrouwbaarheid van de kernfuncties van uw applicatie te waarborgen en de kans op onverwachte problemen in productieomgevingen, is het belangrijk om prioriteit te geven aan schrijftesten voor uw sleutel componenten.

Bovendien kunt u uw testaanpak verbeteren door snapshottests en end-to-end-tests op te nemen.