Je Eerste Test Schrijven

Introductie

Nu Jest geïnstalleerd is, gaan we een echte test schrijven! We beginnen super simpel en bouwen het langzaam op.

Anatomie van een Test

Elke Jest test heeft dezelfde basis structuur. Laten we het stap voor stap bekijken:

test('beschrijving van wat je test', () => {
  // 1. Arrange - Voorbereiden
  // 2. Act - Actie uitvoeren
  // 3. Assert - Checken of het klopt
});

De 3 A's: Arrange, Act, Assert

const getal1 = 5;
const getal2 = 3;

const resultaat = optellen(getal1, getal2);

expect(resultaat).toBe(8);

Test een Simpele Functie

We beginnen met het testen van een eenvoudige JavaScript functie. Geen React, gewoon pure JavaScript.

Stap 1: Maak een functie

Maak een nieuw bestand: src/utils.js

// Simpele optelfunctie
export function optellen(a, b) {
  return a + b;
}

// Functie om te checken of iemand volwassen is
export function isVolwassen(leeftijd) {
  return leeftijd >= 18;
}

Stap 2: Schrijf de test

Maak een test bestand: src/utils.test.js

import { optellen, isVolwassen } from './utils';

test('optellen telt twee getallen op', () => {
  // Arrange
  const getal1 = 5;
  const getal2 = 3;
  
  // Act
  const resultaat = optellen(getal1, getal2);
  
  // Assert
  expect(resultaat).toBe(8);
});

test('isVolwassen geeft true voor 18+', () => {
  // Arrange & Act
  const resultaat = isVolwassen(20);
  
  // Assert
  expect(resultaat).toBe(true);
});

test('isVolwassen geeft false voor onder 18', () => {
  const resultaat = isVolwassen(16);
  expect(resultaat).toBe(false);
});

Stap 3: Run de test

npm run test

Je zou moeten zien:

PASS  src/utils.test.js
  ✓ optellen telt twee getallen op (3ms)
  ✓ isVolwassen geeft true voor 18+ (1ms)
  ✓ isVolwassen geeft false voor onder 18 (1ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total

Test een React Component

Nu gaan we een stapje verder: een React component testen.

Stap 1: Maak een simpel component

Maak een bestand: src/components/Greeting.jsx

function Greeting({ name }) {
  return (
    <div>
      <h1>Hallo, {name}!</h1>
      <p>Welkom op onze website</p>
    </div>
  );
}

export default Greeting;

Stap 2: Schrijf de test

Maak een test: src/components/Greeting.test.jsx

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

test('toont de juiste naam', () => {
  // Arrange & Act
  render(<Greeting name="Jan" />);
  
  // Assert
  const heading = screen.getByText('Hallo, Jan!');
  expect(heading).toBeInTheDocument();
});

test('toont welkomst tekst', () => {
  render(<Greeting name="Piet" />);
  
  const tekst = screen.getByText('Welkom op onze website');
  expect(tekst).toBeInTheDocument();
});

Stap 3: Run de test

npm run test

Als alles goed gaat, zie je:

PASS  src/components/Greeting.test.jsx
  ✓ toont de juiste naam (45ms)
  ✓ toont welkomst tekst (12ms)

Test Structuur met describe()

Als je meerdere tests hebt voor hetzelfde component, kun je ze groeperen met describe().

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

describe('Greeting component', () => {
  
  test('toont de juiste naam', () => {
    render(<Greeting name="Jan" />);
    expect(screen.getByText('Hallo, Jan!')).toBeInTheDocument();
  });
  
  test('toont welkomst tekst', () => {
    render(<Greeting name="Piet" />);
    expect(screen.getByText('Welkom op onze website')).toBeInTheDocument();
  });
  
  test('werkt met lege naam', () => {
    render(<Greeting name="" />);
    expect(screen.getByText('Hallo, !')).toBeInTheDocument();
  });
  
});

Output in terminal:

Greeting component
  ✓ toont de juiste naam
  ✓ toont welkomst tekst
  ✓ werkt met lege naam

Tips & Veelgemaakte Fouten

Veelgemaakte Fouten

// FOUT - geen import
test('...', () => {
  render(<Greeting />); // Error!
});

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

// FOUT - geen expect, test doet niks
test('optellen werkt', () => {
  const resultaat = optellen(2, 3);
  // Vergeten te checken!
});

// GOED
test('optellen werkt', () => {
  const resultaat = optellen(2, 3);
  expect(resultaat).toBe(5); // Check!
});

Goede Test Gewoontes

// SLECHT - test te veel dingen
test('alles werkt', () => {
  expect(optellen(1, 2)).toBe(3);
  expect(aftrekken(5, 2)).toBe(3);
  expect(vermenigvuldigen(2, 3)).toBe(6);
});

// GOED - aparte tests
test('optellen werkt', () => {
  expect(optellen(1, 2)).toBe(3);
});

test('aftrekken werkt', () => {
  expect(aftrekken(5, 2)).toBe(3);
});

// Test normale gevallen
test('optellen met positieve getallen', () => {
  expect(optellen(5, 3)).toBe(8);
});

// Test edge cases
test('optellen met 0', () => {
  expect(optellen(5, 0)).toBe(5);
});

test('optellen met negatieve getallen', () => {
  expect(optellen(-5, 3)).toBe(-2);
});

Handige Shortcuts

npm run test:watch

Wat nu?

Je hebt nu de basis van Jest tests geleerd! Volgende stappen:

• Leer meer matchers - toBe, toEqual, toContain, etc.
• Component testing - Buttons, forms, events