Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Componenten testen met unittests

Schrijf effectieve unittests voor uw React-componenten met testbibliotheken zoals React Testing Library en Jest.

Les 1 van 410 stappen

Componenten testen met unittests is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Kennismaking met unittests

Welkom bij unittests voor React-componenten! Met unittests zorg je ervoor dat de kleinste, onafhankelijke onderdelen van je code — je componenten — precies werken zoals bedoeld.

Wat is een unit test? Dat is een test voor een 'unit' code, vaak één functie of component.
Waarom componenten testen? Om fouten vroeg te ontdekken, regressies te voorkomen en ervoor te zorgen dat je interface zich voorspelbaar gedraagt.
We richten ons op het isoleren van componenten en het testen van hun specifieke functionaliteit.

Jest: de testrunner

Jest is een populair JavaScript-testframework dat door Facebook is ontwikkeld. Het wordt vaak met React gebruikt omdat het snel en uitgebreid is en alles bevat wat je nodig hebt om te testen.

Testrunner: voert je tests uit en rapporteert de resultaten.
Assertiebibliotheek: biedt functies zoals expect om te controleren of waarden aan bepaalde voorwaarden voldoen.
Mockbibliotheek: helpt code te isoleren door afhankelijkheden te vervangen door 'mock'-versies.

React Testing Library (RTL)

Terwijl Jest de tests uitvoert, helpt React Testing Library (RTL) je React-componenten te testen op een manier die nabootst hoe gebruikers ermee werken.

Gebruikersgericht: RTL moedigt aan om daadwerkelijk gebruikersgedrag te testen, niet interne implementatiedetails.
Toegankelijkheid: de querymethoden (zoals getByRole) stimuleren goede toegankelijkheidspraktijken.
De bibliotheek biedt hulpprogramma's om componenten te renderen, de DOM te doorzoeken en gebruikersgebeurtenissen te simuleren.

Je testomgeving instellen

Next.js-projecten worden vaak al geleverd met Jest en RTL geconfigureerd, of deze zijn eenvoudig toe te voegen. Dit gebruik je meestal:

jest: de basistestrunner.
@testing-library/react: de belangrijkste bibliotheek voor het testen van React-componenten.
@testing-library/jest-dom: biedt aangepaste Jest-matchers voor betere DOM-asserties (bijvoorbeeld .toBeInTheDocument()).

Deze bibliotheken werken samen om een krachtige testopstelling te creëren.

Onze eerste component om te testen

Laten we een eenvoudige MyButton-component maken. Deze toont tekst en voert een functie uit wanneer je erop klikt. Dit is een veelgebruikt patroon voor interactieve interface-elementen.

We slaan deze op als components/MyButton.js:

import React from 'react';

function MyButton({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

export default MyButton;

Basisteststructuur en renderen

Testbestanden staan meestal naast de component (bijvoorbeeld components/MyButton.test.js). We gebruiken describe om verwante tests te groeperen en test (of it) voor afzonderlijke testgevallen.

Laten we eerst alleen onze knop renderen en controleren of deze verschijnt. We gebruiken hiervoor render uit RTL.

import { render, screen } from '@testing-library/react';
import MyButton from './MyButton';

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

Elementen opzoeken met RTL

RTL biedt verschillende 'query'-methoden om elementen in de gerenderde component te vinden. Je gebruikt bij voorkeur queries die lijken op de manier waarop een gebruiker elementen zou vinden, met prioriteit voor toegankelijkheid.

getByRole: vindt elementen op basis van hun ARIA-rol (bijvoorbeeld 'button', 'heading'). Sterk aanbevolen!
getByText: vindt elementen die specifieke tekst bevatten.
getByLabelText: vindt elementen die aan een label zijn gekoppeld.

In het vorige voorbeeld gebruikten we getByText, wat uitstekend werkt voor tekstinhoud.

Interactie simuleren en assertions uitvoeren

Laten we nu testen of de onClick-handler van onze knop wordt aangeroepen wanneer erop wordt geklikt. We gebruiken fireEvent uit RTL om gebruikersgebeurtenissen te simuleren en jest.fn() om een 'mock'-functie te maken.

Met jest.fn() kun je bijhouden of de functie is aangeroepen, hoe vaak dat is gebeurd en met welke argumenten. .toHaveBeenCalledTimes() is een jest-dom-matcher.

import { render, screen, fireEvent } from '@testing-library/react';
import MyButton from './MyButton';

describe('MyButton', () => {
  test('calls onClick handler when clicked', () => {
    const handleClick = jest.fn(); // Create a mock function
    render(<MyButton text="Submit" onClick={handleClick} />);
    
    const buttonElement = screen.getByRole('button', { name: /Submit/i });
    fireEvent.click(buttonElement); // Simulate a click
    
    expect(handleClick).toHaveBeenCalledTimes(1); // Assert it was called once
  });
});

Korte controle over testen

Je hebt een component met de naam Greeting die 'Hello, [name]!' weergeeft.

// components/Greeting.js

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
export default Greeting;

Welk testfragment controleert correct of 'Hello, Alice!' wordt gerenderd?

Beantwoord dit in de interactieve les

Samenvatting: componenten testen met unittests

Goed gedaan! Je hebt je eerste stappen gezet met het testen van React-componenten met Jest en React Testing Library.

Jest is je testrunner en assertieframework.
React Testing Library helpt je componenten te testen vanuit het perspectief van een gebruiker.
Je hebt geleerd componenten te renderen, elementen op te zoeken, gebruikersinteracties te simuleren en asserties te doen over het gedrag van componenten.

Blijf oefenen om robuuste en betrouwbare Next.js-toepassingen te bouwen!

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: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Componenten testen met unittests” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Componenten testen met unittests”, 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Wat leer ik in “Componenten testen met unittests”?

Schrijf effectieve unittests voor uw React-componenten met testbibliotheken zoals React Testing Library en Jest. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 “Componenten testen met unittests”?

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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)