Fullstackwebapps met Next.js 15 · Les

Unit- en integratietests

Schrijf effectieve unit- en integratietests voor React-componenten en Next.js-functies met Jest en React Testing Library.

Les 1 van 412 stappen

Unit- en integratietests is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Waarom we onze code testen

Welkom! Bij moderne webontwikkeling, vooral bij complexe applicaties die met Next.js zijn gebouwd, is het belangrijk dat je code werkt zoals verwacht. Daar komen testen van pas.

Betrouwbaarheid: testen voorkomen bugs en regressies.
Onderhoudbaarheid: goed geteste code is eenvoudiger te herstructureren en bij te werken.
Vertrouwen: je kunt nieuwe functies met meer zekerheid implementeren.

We richten ons op unittests (kleine, geïsoleerde onderdelen) en integratietests (hoe onderdelen samenwerken).

Jest en RTL instellen

Jest is een populair JavaScript-testframework en React Testing Library (RTL) is een verzameling hulpprogramma's voor het testen van React-componenten. Samen vormen ze een krachtig duo voor Next.js-apps.

Installeer eerst de benodigde pakketten:

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

Je eerste unit-test (functie)

Een unit-test controleert een klein, geïsoleerd stukje code, zoals één functie. We maken een eenvoudige hulpfunctie en schrijven daar vervolgens een test voor.

Dit is onze hulpfunctie:

// utils/math.js
function add(a, b) {
  return a + b;
}

// This block makes the file directly runnable via Node.js
if (typeof require !== 'undefined' && require.main === module) {
  console.log("Running add(5, 3):", add(5, 3)); // Expected: 8
  console.log("Running add(10, -2):", add(10, -2)); // Expected: 8
}

De functie 'add' testen

Nu schrijven we een test voor onze add-functie. Jest gebruikt describe om tests te groeperen en test (of it) voor afzonderlijke testgevallen. expect wordt gebruikt voor beweringen.

Sla dit op in utils/math.test.js:

// utils/math.test.js
import { add } from './math';

describe('add function', () => {
  test('should correctly add two positive numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('should handle negative numbers', () => {
    expect(add(5, -3)).toBe(2);
  });
});

// To run tests: npx jest

Kennismaken met React Testing Library

React Testing Library (RTL) moedigt je aan componenten te testen op een manier die nabootst hoe gebruikers ermee werken. In plaats van de interne toestand te controleren, zoek je in de DOM naar elementen die een gebruiker zou zien of waarmee die zou werken.

render: koppelt een React-component aan een virtuele DOM.
screen: biedt methoden om de weergegeven DOM te doorzoeken (bijvoorbeeld getByText en getByRole).
@testing-library/jest-dom: voegt aangepaste matchers toe, zoals toBeInTheDocument.

Een eenvoudige React-component testen

We gaan een eenvoudige knopcomponent testen. We controleren of deze met de juiste tekst wordt weergegeven.

Eerst de component (components/Button.jsx):

// components/Button.jsx
export default function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

Het weergeven van componenten testen

Nu de test voor onze Button-component. We gebruiken render om deze op het scherm te plaatsen en screen.getByText om deze te vinden. Vervolgens bevestigen we met toBeInTheDocument dat deze aanwezig is.

Sla dit op als components/Button.test.jsx:

// components/Button.test.jsx
import { render, screen } from '@testing-library/react';
import Button from './Button';

describe('Button component', () => {
  test('renders with the correct label', () => {
    render(<Button label="Click Me" />);
    const buttonElement = screen.getByText(/Click Me/i);
    expect(buttonElement).toBeInTheDocument();
  });
});

Gebruikersinteracties simuleren

Naast het weergeven moeten we testen hoe componenten reageren op acties van gebruikers. RTL's fireEvent (of userEvent voor realistischere interacties) helpt bij het simuleren van klikken, wijzigingen in invoervelden enzovoort.

We kunnen controleren of een functie die via props is doorgegeven, wordt aangeroepen.

// components/Button.test.jsx (continued)
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button component interactions', () => {
  test('calls the onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Jest mock function
    render(<Button label="Click Me" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Click Me/i);
    fireEvent.click(buttonElement);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Integratie: rout handlers testen

De Route Handlers van Next.js (API-routes in de App Router) zijn functies die aan de serverkant worden uitgevoerd. We kunnen ze testen door hun HTTP-methoden (zoals GET en POST) rechtstreeks te importeren en aan te roepen, en door de request- en response-objecten van Next.js te simuleren.

Hier is een voorbeeld:

// app/api/hello/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' }, { status: 200 });
}

// app/api/hello/route.test.js
import { GET } from './route';

describe('GET /api/hello', () => {
  test('should return a greeting message with status 200', async () => {
    // No need to mock NextRequest/NextResponse directly for simple cases
    // as NextResponse.json returns a standard Response object.
    const response = await GET();
    const json = await response.json();

    expect(response.status).toBe(200);
    expect(json.message).toBe('Hello from API!');
  });
});

Beste werkwijzen voor effectieve tests

Zo schrijf je nuttige en onderhoudbare tests:

Test gebruikersgedrag: richt je op wat de gebruiker ziet en doet, niet op de interne toestand van de component.
Houd tests gericht: elke test moet idealiter één ding controleren.
Maak tests snel: trage tests ontmoedigen je om ze vaak uit te voeren.
Leesbaarheid: schrijf duidelijke tests die eenvoudig te begrijpen zijn.
Simuleer afhankelijkheden: gebruik jest.mock() of jest.fn() om eenheden te isoleren en te voorkomen dat externe factoren de tests beïnvloeden.

Korte controle

Welke van de volgende uitspraken over testen in Next.js met Jest en React Testing Library is WAAR?

Beantwoord dit in de interactieve les

Samenvatting: unit- en integratietesten

Goed gedaan! Je hebt de basis van unit- en integratietesten in Next.js geleerd:

Jest is je testframework.
React Testing Library helpt je componenten te testen zoals een gebruiker dat zou doen.
Unit-tests controleren kleine, geïsoleerde code-eenheden.
Integratietests controleren hoe verschillende onderdelen, zoals componenten en API's, samenwerken.
Je kunt functies, React-componenten en Next.js Route Handlers testen.
Beste werkwijzen zijn onder andere focussen op gebruikersgedrag en het simuleren van afhankelijkheden.

Hierna verkennen we end-to-endtesten voor volledige applicatiestromen.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Unit- en integratietests” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Unit- en integratietests”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat leer ik in “Unit- en integratietests”?

Schrijf effectieve unit- en integratietests voor React-componenten en Next.js-functies met Jest en React Testing Library. Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?

Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Unit- en integratietests”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?

Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Fullstackwebapps met Next.js 15