Review: TestSprite MCP Server getest op een Vue 3 + TypeScript project

De afgelopen weken heb ik de kans gehad om de TestSprite MCP server uit te proberen binnen een bestaand Vue 3 + TypeScript project. TestSprite profileert zich als een AI-gedreven testgeneratieplatform dat via het MCP-protocol werkt. In deze blogpost deel ik mijn ervaringen met de installatie, het draaien van tests, de resultaten, en vooral hoe het systeem omgaat met Nederlandse localisatie.

Wat is TestSprite MCP?

TestSprite is een relatief nieuwe speler op het gebied van geautomatiseerd testen. Het platform gebruikt AI om tests te genereren en uit te voeren, en communiceert via het zogenaamde MCP-protocol (Modular Command Protocol). Dit betekent dat je TestSprite eenvoudig kunt integreren met je favoriete IDE, zoals VSCode of Cursor, en dat je met een API-key snel aan de slag kunt.

Setup: installatie en configuratie

De installatie verliep verrassend soepel. Binnen VSCode heb ik de officiële TestSprite-extensie geïnstalleerd. Daarna moest ik een testsprite.config.json aanmaken in de root van mijn project:

{
  "mcpServer": "http://localhost:4000",
  "apiKey": "TSK-xxxxxxx",
  "projectType": "vue",
  "language": "typescript"
}

Na het invullen van de API-key (die je in het TestSprite dashboard genereert), kon ik direct verbinding maken met de MCP-server. De extensie herkende automatisch mijn src/ map en stelde voor om tests te genereren voor de belangrijkste componenten, zoals src/components/LoginForm.vue en src/views/DashboardView.vue.

Testen draaien op een Vue 3 + TypeScript project

Het draaien van de tests was eenvoudig: via de command palette in VSCode selecteerde ik "TestSprite: Run All Tests". De extensie stuurde mijn code naar de MCP-server, waar de AI de bestaande code analyseerde en relevante tests draaide.

Wat me opviel was dat TestSprite niet alleen unit tests genereerde, maar ook enkele integratietests, bijvoorbeeld voor de interactie tussen LoginForm.vue en de authenticatieservice in src/services/auth.ts. De gegenereerde tests werden opgeslagen in de map tests/generated/, netjes gescheiden van mijn handgeschreven tests.

Tijdens het draaien van de tests verscheen er een live overzicht in het TestSprite dashboard. Hier zag ik een duidelijke lijst van alle testcases, inclusief hun status (geslaagd/mislukt), beschrijving, en runtime.

Testresultaten: wat liet het dashboard zien?

Na het voltooien van de testrun kreeg ik een overzichtelijk dashboard te zien. In totaal werden er 22 tests uitgevoerd: 20 geslaagd, 2 mislukt. Het dashboard toonde per test:

• Naam van de test (bijvoorbeeld: “LoginForm toont foutmelding bij ongeldig wachtwoord”)
• Status (groene vinkjes voor geslaagde tests, rode kruisjes voor mislukte)
• Uitvoertijd per test
• Een korte beschrijving van de teststap

De twee mislukte tests betroffen edge cases rondom foutafhandeling in de authenticatieservice. Het dashboard gaf duidelijke foutmeldingen, inclusief stack traces en de exacte regel in src/services/auth.ts waar het misging. Dit maakte het debuggen een stuk makkelijker.

Screenshot-referentie: Op de screenshot zie je links de lijst met testcases, in het midden de details van de geselecteerde test (inclusief input, verwachte output en daadwerkelijke output), en onderaan een tijdlijn van de testrun. De mislukte tests zijn rood gemarkeerd, met een dropdown voor de foutdetails.

Locale-analyse: hoe goed is de Nederlandse ondersteuning?

Positief: correcte Nederlandse datumnotatie

Een groot pluspunt vond ik dat TestSprite de Nederlandse datumnotatie (DD-MM-YYYY) correct herkende en weergaf in de testbeschrijvingen. Bijvoorbeeld, in de test “Dashboard toont rapport voor 31-05-2024” werd de datum netjes in het Nederlandse formaat weergegeven, zowel in de beschrijving als in de testdata. Dit lijkt misschien een detail, maar het voorkomt verwarring, zeker bij internationale teams of wanneer je met datumgevoelige functionaliteit werkt.

Negatief (bug): verkeerde euro-valutaopmaak

Helaas liep ik ook tegen een locale-bug aan. In verschillende tests waarbij bedragen werden gecontroleerd, viel het op dat het systeem de Engelse valutaopmaak gebruikte: €1,234.56 in plaats van de Nederlandse notatie €1.234,56 (dus komma als decimaalscheider, punt als duizendtallenscheider). Dit kwam onder andere voor in de test “Factuurbedrag wordt correct weergegeven”.

Dit leidde tot twee problemen:

1. De test faalde omdat de UI de juiste Nederlandse notatie gebruikte, maar de verwachte waarde in de test Engels was.
2. Het dashboard zelf toonde bedragen in de Engelse stijl, wat verwarrend is voor Nederlandse gebruikers.

Hopelijk wordt dit in een volgende release opgelost, want voor financiële applicaties is dit een cruciaal punt.

Eindoordeel en aanbeveling

TestSprite MCP server biedt een krachtige en toegankelijke manier om AI-gedreven tests te genereren en te draaien binnen een Vue 3 + TypeScript project. De installatie is eenvoudig, de integratie met VSCode werkt soepel, en het dashboard geeft veel inzicht in je testresultaten. Vooral de correcte weergave van Nederlandse datums is een pluspunt.

De belangrijkste verbeterpunten zitten nu nog in de locale-ondersteuning voor valuta, wat vooral bij financiële projecten een showstopper kan zijn. Ik raad TestSprite zeker aan voor ontwikkelaars die snel hun testdekking willen vergroten, maar let goed op als je met bedragen werkt — controleer altijd de gegenereerde verwachte waarden!

Al met al een veelbelovende tool die met een paar kleine aanpassingen een vaste plek in mijn toolchain kan krijgen.