Tests toevoegen met AI
Ontdek problemen voordat gebruikers dat doen.
Tests toevoegen met AI is een gratis Vibe-coding-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 Vibe-coding. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vibe-coding bevat in totaal 4 lessen.
Waarom tests je app redden
Je hebt een app gemaakt met vibe coding. Vandaag werkt hij. Maar volgende week vraag je AI om een functie toe te voegen en gaat er ongemerkt iets anders kapot. Tests zijn kleine programma's die controleren of je app nog steeds het juiste doet.
Zie tests als een vangnet: telkens wanneer je code wijzigt, worden ze opnieuw uitgevoerd en geven ze een waarschuwing als er iets kapot is gegaan. Met AI hoef je ze niet eens met de hand te schrijven — beschrijf wat er moet gebeuren en laat AI de tests genereren.
Hoe een test er echt uitziet
Een test roept je code aan met bepaalde invoer en controleert of de uitvoer overeenkomt met wat je verwacht. Is dat niet zo, dan mislukt de test en wijst deze het probleem aan.
Hier is een echt, uitvoerbaar voorbeeld: een functie plus een controle.
function add(a, b) {
return a + b;
}
// a tiny hand-made 'test'
function expectEqual(actual, expected, label) {
if (actual === expected) console.log('PASS: ' + label);
else console.log('FAIL: ' + label + ' (got ' + actual + ')');
}
expectEqual(add(2, 3), 5, 'adds two numbers');
expectEqual(add(-1, 1), 0, 'handles negatives');Laat AI de tests schrijven
Je schrijft tegenwoordig zelden nog tests vanaf nul. Plak je functie in Cursor, Claude Code of Copilot en vraag om tests. Het belangrijkste is dat je AI vertelt welke gevallen belangrijk zijn: normale invoer, vreemde invoer en randgevallen (leeg, nul, negatief, enorm).
Hier is een opdracht die je kunt kopiëren.
Here is my function:
function discount(price, percent) {
return price - (price * percent / 100);
}
Write tests using Vitest. Cover:
- a normal case (100 at 20%)
- 0% discount
- 100% discount
- a negative price (should it even be allowed?)
Use describe/it/expect. Keep it short.Testuitvoerders: het hulpmiddel dat tests uitvoert
Je voert tests niet met de hand uit. Een testuitvoerder vindt al je testbestanden, voert ze uit en toont een overzichtelijk GESLAAGD/MISLUKT-rapport. Voor JavaScript zijn Vitest en Jest populaire opties.
Vraag je AI-tool om er een in te stellen — de tool kent de opdrachten en configuratie, zodat je die niet uit je hoofd hoeft te leren.
Set up Vitest in this project. Add the dependency, a "test" script in package.json, and a sample test file so I can run `npm test` and see it pass.Anatomie van een echt testbestand
De meeste JS-tests hebben dezelfde vorm: describe groepeert gerelateerde tests, it (of test) is één geval en expect controleert een waarde. AI genereert dit patroon voortdurend, dus het loont om het te herkennen.
Dit is wat AI meestal teruggeeft.
import { describe, it, expect } from 'vitest';
import { discount } from './pricing';
describe('discount', () => {
it('takes 20% off 100', () => {
expect(discount(100, 20)).toBe(80);
});
it('returns full price at 0%', () => {
expect(discount(100, 0)).toBe(100);
});
});Tests als specificatie voor AI
Hier is een krachtige aanpak: schrijf de tests eerst en vraag AI daarna om ze te laten slagen. De tests worden een nauwkeurige beschrijving van wat je wilt, zonder enige onduidelijkheid.
Hierdoor verandert je werkwijze — in plaats van gedrag in vage woorden te beschrijven, beschrijf je het in controleerbare code.
These tests describe a function I want. Write the `slugify` function so ALL of these pass:
import { slugify } from './slug';
expect(slugify('Hello World')).toBe('hello-world');
expect(slugify(' Spaced Out ')).toBe('spaced-out');
expect(slugify('A/B & C')).toBe('a-b-c');
Return only the function.Vertrouw tests die altijd slagen niet
AI schrijft soms tests die niet kunnen mislukken — ze beweren iets dat vanzelfsprekend waar is of bouwen de fout opnieuw in. Een geslaagde test die niets bewijst, is erger dan helemaal geen test.
Snelle controle: maak je functie tijdelijk expres kapot. Slaagt de test nog steeds, dan is het een neptest. Vraag AI om het gedrag echt te laten controleren.
// Suspicious: this passes no matter what discount() returns
it('works', () => {
const result = discount(100, 20);
expect(typeof result).toBe('number'); // too weak!
});
// Better: checks the actual value
it('takes 20% off 100', () => {
expect(discount(100, 20)).toBe(80);
});Denk aan randgevallen
Fouten verbergen zich in ongebruikelijke invoer: lege tekenreeksen, nul, negatieve getallen, ontbrekende waarden en zeer grote lijsten. AI is goed in het bedenken hiervan als je erom vraagt.
Gebruik een opdracht die expres om vreemde gevallen vraagt.
List the edge cases I should test for this function, then write a test for each:
function averageScore(scores) {
return scores.reduce((a, b) => a + b, 0) / scores.length;
}
Think about: empty array, one item, negatives, non-numbers. What should happen for each?Voer tests automatisch uit (CI)
De echte winst: tests worden bij elke wijziging automatisch uitgevoerd. Wanneer je naar GitHub pusht, voert een service zoals GitHub Actions je volledige testsuite opnieuw uit. Gaat er iets mis, dan ontdek je dat binnen enkele minuten — niet via een boze gebruiker.
Je hoeft de YAML-configuratie niet te leren. Vraag AI om deze te schrijven.
Create a GitHub Actions workflow that runs `npm install` and `npm test` on every push and pull request. Use Node 20. Put it in .github/workflows/test.yml.Een verstandig testritme
Je hebt geen dekking van 100% nodig om hiervan te profiteren. Een praktisch ritme voor vibe coders:
- Test de logica die ertoe doet — prijzen, authenticatie, gegevensverwerking en alles wat gebruikers merken.
- Sla triviale UI-koppelingen in eerste instantie over.
- Voeg elke keer dat je een fout oplost een test toe, zodat deze nooit terugkomt.
Vraag AI: Wat zijn de 5 belangrijkste dingen die ik in deze app moet testen? en begin daarmee.
Het testrapport lezen
Wanneer tests mislukken, vertelt de uitvoerder je precies wat de verwachte waarde was en wat er is ontvangen. Raak niet in paniek — kopieer het volledige rapport naar AI en vraag de tool om de code of de test te herstellen (jij bepaalt welke van de twee onjuist is).
My test failed with this output:
FAIL src/pricing.test.js
discount > takes 20% off 100
expected 80 but got 120
Here is the discount function: <paste it>
Is the function wrong or the test wrong? Fix the right one and explain.Snelle controle
Je vraagt AI om tests en ze slagen allemaal onmiddellijk — zelfs nadat je de functie expres hebt stukgemaakt. Wat is dan het waarschijnlijkste probleem?
Samenvatting: tests zijn je vangnet
Je hebt geleerd waarom tests belangrijk zijn wanneer AI je code wijzigt, hoe een test eruitziet en hoe je AI de tests voor je laat schrijven. Belangrijke gewoonten:
- Vertel AI welke gevallen belangrijk zijn, vooral randgevallen.
- Gebruik een uitvoerder zoals Vitest en voer tests bij elke wijziging uit met CI.
- Controleer of tests echt kunnen mislukken — maak de code expres kapot.
- Voeg een test toe wanneer je een fout oplost.
Hierna: houd je door AI gegenereerde code veilig.
Leer JavaScript 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
- 25
- Lessen
- 100
Veelgestelde vragen
Is de les “Tests toevoegen met AI” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vibe-coding, waaronder “Tests toevoegen met AI”, 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 Vibe-coding bevat in totaal 4 lessen.
Wat leer ik in “Tests toevoegen met AI”?
Ontdek problemen voordat gebruikers dat doen. Je oefent met Vibe-coding 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 Vibe-coding te beginnen?
Ervaring vooraf is niet nodig. Vibe-coding 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 “Tests toevoegen met AI”?
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 Vibe-coding?
Ja. Elke les over Vibe-coding 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
- Tests toevoegen met AI
- Beveiligingsbasis voor AI-code
- Code onderhoudbaar houden
- Prestaties en kosten