Wat is Jest?

Jest is een testing framework. Dat betekent: het helpt je om te checken of je code werkt zoals je verwacht.

Waarom zou je dat willen?

Stel je voor: je bouwt een Like button voor een social media app. De button moet:

  • Rood worden als je klikt (liked)
  • Grijs worden als je nogmaals klikt (unliked)
  • Het aantal likes tonen (bijv. "42 likes")

Om te checken of het werkt, moet je nu:

  • De app starten in je browser
  • Op de button klikken
  • Checken of de kleur verandert
  • Nogmaals klikken
  • Checken of het getal klopt
  • Dit herhalen elke keer als je iets verandert

Met Jest? Je schrijft één keer een test die automatisch checkt of de button correct werkt. Elke keer als je je code aanpast, draai je de test. Binnen 2 seconden weet je of alles nog werkt - zonder de browser te openen!

Wat gaan we doen?

In deze les installeer je Jest in je React project. Daarna kun je tests schrijven. Geen zorgen, het is makkelijker dan je denkt!

Wat heb je nodig?

Voordat je begint, zorg dat je dit hebt:

Checklist:

  • Een werkend React project (gemaakt met Vite)
  • VSCode open met je project

Heb je nog geen React project?

Maak er eerst eentje aan met:

npm create vite@latest mijn-project -- --template react
cd mijn-project
npm install
npm run dev

Stap 1: Installeer Jest en Testing Library

We gaan 3 packages installeren. Klinkt als veel, maar elke package heeft een doel:

Wat installeren we?

  • jest - Het testing framework zelf
  • @testing-library/react - Helpt je React componenten te testen
  • @testing-library/jest-dom - Extra matchers om HTML te checken

Wat zijn "matchers"?

Matchers zijn functies waarmee je dingen kunt checken. Bijvoorbeeld:

  • expect(2 + 2).toBe(4) - Check of iets precies gelijk is
  • expect(button).toBeInTheDocument() - Check of een element bestaat
  • expect(text).toContain("Hello") - Check of tekst erin zit

Jest heeft standaard matchers zoals toBe(). Het package @testing-library/jest-dom geeft je nóg meer matchers speciaal voor HTML/React, zoals toBeInTheDocument() en toHaveClass().

Hoe installeren?

Open je terminal in VS Code (Terminal → New Terminal) en typ dit commando:

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

Wat betekent --save-dev?

Dit betekent: "Installeer dit alleen voor development (tijdens het bouwen), niet in de productie app." Jest heb je alleen nodig tijdens het programmeren, niet als je app online staat.

Wat gebeurt er?

Je ziet in je terminal een hoop tekst voorbij komen. Even geduld... Na ongeveer 10-30 seconden zie je zoiets:

added 245 packages in 18s

Gelukt! Je hebt Jest geïnstalleerd. Nu configureren we het.

Stap 2: Configureer Jest

Nu moeten we Jest vertellen hoe het moet werken met React en Vite.

2.1 - Maak een configuratie bestand

Maak een nieuw bestand aan in de root van je project (naast package.json):

Bestandsnaam: jest.config.js

Zet hier deze code in:

export default {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
};

Wat doet deze code?

  • testEnvironment: 'jsdom' - Maak een nep browser voor tests
  • setupFilesAfterEnv - Laad extra setup code
  • moduleNameMapper - Negeer CSS imports (niet belangrijk voor tests)
  • transform - Verwerk React/JSX code

2.2 - Maak een setup bestand

Maak nóg een bestand in de root: jest.setup.js

import '@testing-library/jest-dom';

Dit ene regeltje laadt extra matchers zoals toBeInTheDocument().

2.3 - Installeer Babel (om JSX te verwerken)

React gebruikt JSX (<div> in JavaScript). Jest moet dit kunnen lezen. Installeer:

Wat is Babel?

Babel is een "vertaler" voor JavaScript. Het zet moderne code (zoals JSX) om naar code die overal werkt.

Voorbeeld:

Je schrijft: <button>Klik</button>

Babel vertaalt naar: React.createElement('button', null, 'Klik')

Jest begrijpt JSX niet, maar WEL normale JavaScript. Daarom hebben we Babel nodig!

npm install --save-dev @babel/preset-react @babel/preset-env babel-jest identity-obj-proxy

2.4 - Configureer Babel

Maak een bestand: .babelrc (let op de punt aan het begin!)

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

2.5 - Voeg test script toe

Open package.json en voeg dit toe bij "scripts":

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "test": "jest",
  "test:watch": "jest --watch"
}

Nu kun je tests draaien met:

  • npm run test - Draai alle tests één keer
  • npm run test:watch - Draai tests bij elke wijziging

Stap 3: Test of het werkt

Laten we een super simpele test schrijven om te checken of alles werkt!

Maak een test bestand

Maak in je src folder een nieuw bestand: App.test.jsx

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

test('App component rendert', () => {
  render(<App />);
  
  // Check of er iets op het scherm staat
  const element = screen.getByText(/vite/i);
  expect(element).toBeInTheDocument();
});

Wat doet deze test?

  • render(<App />) - Render je App component
  • screen.getByText(/vite/i) - Zoek tekst met "vite" erin (case insensitive)
  • expect(...).toBeInTheDocument() - Check of het er is

Wat is /vite/i?

Dit is een regex (regular expression) - een manier om tekst te zoeken:

  • /vite/ - Zoek het woord "vite"
  • i aan het eind - Betekent "case insensitive" (hoofdletters maakt niet uit)

Dus /vite/i vindt: "Vite", "VITE", "vite" - allemaal!

Run de test!

Typ in je terminal:

npm run test

Je zou zoiets moeten zien:

PASS  src/App.test.jsx
  ✓ App component rendert (234ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Time:        2.456s

Gefeliciteerd! Jest werkt! Je hebt je eerste test gedraaid.

Krijg je errors? Check:

  • Heb je alle bestanden gemaakt? (jest.config.js, jest.setup.js, .babelrc)
  • Staan de bestanden in de root (naast package.json)?
  • Heb je alle packages geïnstalleerd?
  • Probeer npm install opnieuw

Veelgestelde Vragen

Waarom zoveel packages?

Elk package heeft een specifieke taak:

  • jest - Het testing framework
  • @testing-library/react - Voor React componenten
  • @testing-library/jest-dom - Extra matchers
  • babel-jest - Om JSX te verwerken
  • jsdom - Nep browser voor tests

Moet ik dit voor elk project doen?

Ja, helaas. Maar na de eerste keer ken je de stappen en gaat het sneller!

Waar komen mijn test bestanden?

Test bestanden eindigen op .test.js of .test.jsx en staan meestal naast het bestand dat ze testen:

src/
  ├── App.jsx
  ├── App.test.jsx          ← Test voor App
  ├── components/
  │   ├── Button.jsx
  │   └── Button.test.jsx   ← Test voor Button

Hoe run ik tests automatisch?

Gebruik watch mode:

npm run test:watch

Nu draaien tests automatisch elke keer als je een bestand opslaat!

Help! Ik krijg een error over "transform"

Check of je .babelrc bestand hebt aangemaakt en of babel-jest is geïnstalleerd.

Kan ik tests ook in VS Code draaien?

Ja! Installeer de "Jest Runner" extensie in VS Code. Dan kun je tests direct in je editor draaien met een knopje.

Klaar voor de volgende stap?

Nu Jest werkt, kun je je eerste echte test schrijven!