Natuurlijk! Hier is een gedetailleerde gids om geautomatiseerde testworkflows in WebStorm op te zetten voor jouw JavaScript-project met Jest: 1. WebStorm Configureren voor JavaScript en Jest ------------------------------------------------- a. Projectinstellingen controleren: - Open je project in WebStorm. - Ga naar `File` > `Settings` (Windows/Linux) of `WebStorm` > `Preferences` (macOS). - Navigeer naar `Languages & Frameworks` > `JavaScript`. - Zorg dat de juiste JavaScript-versie is geselecteerd onder `JavaScript language version`. - Onder `Libraries` voeg je eventueel Jest toe als globale library: - Klik op `Download...` naast `JavaScript Libraries`. - Zoek naar `Jest` en voeg het toe. b. Jest installeren: - Open de terminal in WebStorm. - Voer het commando uit: ``` npm install --save-dev jest ``` - Dit zorgt dat Jest in je project is geïnstalleerd. 2. Jest Configuratiebestanden toevoegen ---------------------------------------- - Maak een `jest.config.js` bestand in de root van je project met bijvoorbeeld: ```js module.exports = { testEnvironment: 'node', // andere opties zoals coverage, setupFiles, etc. }; ``` - Pas de configuratie aan op basis van je wensen. 3. Test Scripts toevoegen aan package.json ------------------------------------------- - Voeg een script toe voor het uitvoeren van tests: ```json "scripts": { "test": "jest" } ``` - Hiermee kun je tests via `npm test` of `npm run test` starten. 4. Testconfiguratie in WebStorm instellen ------------------------------------------ a. Jest als Test Runner: - Ga naar `Run` > `Edit Configurations...`. - Klik op het plus-icoon (`+`) en kies `Jest`. - Geef een naam zoals "Jest Tests". - Bij `Jest package` selecteer je de locatie van Jest, meestal in `node_modules/jest`. - Bij `Working directory` zet je de root van je project. - Klik op `OK`. b. Automatisch tests uitvoeren bij wijzigingen: - Ga naar `File` > `Settings` > `Build, Execution, Deployment` > `Debugger`. - Schakel `Enable Debugging` en `Live Edit` in voor real-time updates. - Voor continue testen kun je gebruik maken van externe tools zoals `jest --watch`, maar WebStorm ondersteunt ook een ingebouwde watch modus via de run configuratie. 5. Debuggen van Tests ---------------------- - Plaats breakpoints in je test- of bronbestanden. - Start de Jest run configuration in debug-modus (`Debug` knop). - WebStorm stopt bij breakpoints, zodat je variabelen en call stacks kunt inspecteren. 6. Test Monitoring en Rapportages --------------------------------- - Voor uitgebreide rapportages kun je jest-coverage gebruiken: - Voeg in je `package.json` onder scripts: ```json "test:coverage": "jest --coverage" ``` - Run dit script via WebStorm of via terminal. - In WebStorm kun je ook de coverage-rapporten bekijken in de IDE. 7. Nuttige Plugins en Instellingen ---------------------------------- - **Jest Plugin**: - Ga naar `Preferences` > `Plugins`. - Zoek naar `Jest` en installeer de plugin. - Hiermee krijg je functies zoals inline testen, testresultaten direct in code, etc. - **Code Style & Linting**: - Gebruik ESLint voor consistente code. - Installeer ESLint (`npm install --save-dev eslint`) en configureer deze. - WebStorm kan ESLint automatisch toepassen en fouten markeren. - **File Watchers**: - Configureer File Watchers om bij elke wijziging automatisch tests uit te voeren. - Ga naar `Preferences` > `Tools` > `File Watchers`. - Voeg een nieuwe watcher toe voor `npm test -- --watch` of `jest --watch`. 8. Extra Tips voor Efficiënt Testen ------------------------------------ - Gebruik `jest --watch` voor automatische herhaling bij codewijzigingen. - Maak gebruik van test-suites en mock data voor snellere tests. - Organiseer je tests overzichtelijk in mappen en met duidelijke namen. Door deze stappen te volgen, heb je een krachtige en efficiënte testworkflow in WebStorm met Jest. Hiermee kun je snel testen uitvoeren, debuggen en je testresultaten monitoren, wat je ontwikkelingstijd aanzienlijk zal verbeteren. Mocht je verdere hulp nodig hebben bij specifieke configuraties of problemen, vraag gerust!

Zeker! Hier een gedetailleerde handleiding voor het opzetten van geautomatiseerde testworkflows in WebStorm met Jest: ## 1. Initiële Jest Configuratie ### Jest installeren ```bash npm install --save-dev jest # of yarn add --dev jest ``` ### Basis Jest configuratie (package.json) ```json { "scripts": { "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage" }, "jest": { "testEnvironment": "node", "collectCoverageFrom": [ "src/**/*.js", "!src/**/*.test.js" ] } } ``` ## 2. WebStorm Jest Configuratie ### Stap 1: Jest als testframework instellen 1. Ga naar **File > Settings** (Ctrl+Alt+S) 2. Navigeer naar **Languages & Frameworks > JavaScript > Jest** 3. Kies **Jest package** en selecteer: - ✅ **Jest package** (wijs naar node_modules/jest) - Of kies **Configuration file** als je een jest.config.js gebruikt ### Stap 2: Run Configurations maken 1. **Run > Edit Configurations** 2. Klik **+** en kies **Jest** 3. Configureer: - **Name**: "Unit Tests" - **Jest options**: `--watchAll --verbose` - **Working directory**: Je projectroot ## 3. Debugging Configuratie ### Jest Debug Configuration 1. **Run > Edit Configurations** 2. **+ > Jest** 3. Naam: "Debug Tests" 4. Options: `--runInBand --no-cache` 5. ✅ **Breakpoints** werken automatisch ### Debug workflow: - Plaats breakpoints in je testbestanden - Klik met rechts op testbestand → **Debug 'testname'** - Of gebruik **Ctrl+Shift+D** (Windows/Linux) / **⇧⌘D** (Mac) ## 4. Live Templates voor Snellere Testcreatie ### Jest Live Template toevoegen: 1. **Settings > Editor > Live Templates** 2. Kies **JavaScript** → **+** 3. Vul in: - **Afkorting**: `jesttest` - **Beschrijving**: "Creëert Jest test template" - **Template**: ```javascript test('$NAME$', () => { $END$ }); ``` ## 5. Nuttige WebStorm Plugins ### Aanbevolen plugins: 1. **Jest** (officiële JetBrains plugin) - ✅ Meestal pre-geïnstalleerd 2. **Jest Runner** - Voor individuele test uitvoering 3. **Code Coverage** - Geïntegreerd in WebStorm ### Plugin installatie: 1. **Settings > Plugins** 2. Zoek naar "Jest" 3. Installeer en herstart WebStorm ## 6. Test Runner Integratie ### In-editor test controls: - **Groene pijlen** naast test beschrijvingen - Klik om individuele tests uit te voeren - **Ctrl+Shift+R** (Windows/Linux) / **⇧⌘R** (Mac) voor huidige test ### Test resultaten weergave: - **Run** tool window toont testresultaten - **Kleurcodering**: Groen (geslaagd), Rood (gefailed) - Klik op gefaalde tests om naar de fout te navigeren ## 7. Code Coverage Monitoring ### Coverage instellen: 1. **Run > Edit Configurations** 2. Selecteer je Jest configuratie 3. **Code Coverage** tab 4. Kies **Jest** als coverage runner ### Coverage weergave: - **Run with Coverage** (Ctrl+Shift+F10 / ⇧⌘F10) - Coverage percentages in editor gutter - Gedetailleerd rapport in **Coverage** tool window ## 8. Snelle Toetsen & Workflows ### Essentiële shortcuts: - **Ctrl+Shift+T** / **⇧⌘T**: Herlaat laatste test run - **Ctrl+Shift+F10** / **⇧⌘F10**: Run huidige test - **Ctrl+Shift+D** / **⇧⌘D**: Debug huidige test - **Alt+Enter**: Quick fixes voor test gerelateerde issues ### File Watcher voor automatisch testen: 1. **Settings > Tools > File Watchers** 2. **+ > Jest** 3. Configureer om tests te runnen bij bestandswijzigingen ## 9. Geavanceerde Configuratie ### Jest configuratiebestand (jest.config.js): ```javascript module.exports = { verbose: true, collectCoverageFrom: [ 'src/**/*.{js,jsx}', '!**/node_modules/**', '!**/vendor/**' ], coverageDirectory: 'coverage', testEnvironment: 'node' }; ``` ### WebStorm project instellingen back-up: - Exporteer je run configurations via **File > Export Settings** - Sla .idea/runConfigurations map op in versiebeheer ## 10. Best Practices voor Productiviteit ### Test organisatie: - Gebruik `.test.js` of `.spec.js` extensies - Houd tests naast source files of in `__tests__` mappen - Gebruik beschrijvende testnamen ### Performance optimalisatie: - Gebruik `--watch` voor development - `--no-cache` bij debugging issues - `--maxWorkers=4` voor parallel testen op multi-core systems Met deze setup kun je efficiënt tests schrijven, uitvoeren, debuggen en monitoren direct vanuit WebStorm. De geïntegreerde tools zorgen voor een naadloze ontwikkelervaring!