Vue.js Testen und Debuggen: Training mit Vitest und Playwright

Warum und was testen

• Testpyramide für Vue-Apps: Unit-, Komponenten- und End-to-End-Tests abgrenzen
• Wozu Tests: Regressionen vor dem Merge abfangen und Umbauten absichern
• Testbar entwerfen: Logik in Composables und Stores statt im Template

Test-Toolkit einrichten

• Bausteine eines Test-Toolkits: Runner, Assertions, DOM-Umgebung, Mocks, Abdeckung
• Vitest als Nachfolger von Jest: kompatible expect-API, Konfiguration über Vite
• Vitest installieren, Umgebung jsdom oder happy-dom wählen, Watch-Modus nutzen
• Jest-Bestandsprojekte bis Jest 29: @vue/vue3-jest, Babel-Transformation, schrittweiser Umstieg
• ESLint mit Flat Config und eslint-plugin-vue als erste Prüfstufe
• Typfehler vor dem Testlauf aufdecken mit vue-tsc --noEmit

Unit-Tests mit Vitest

• Strings prüfen mit toBe, toContain und toMatch
• Zahlen und Gleitkommawerte mit toBeGreaterThan und toBeCloseTo
• Objekte und Arrays mit toEqual, toStrictEqual und toContainEqual
• Tests ordnen mit describe, beforeEach und test.each für Tabellenfälle
• Asynchronen Code testen: await, resolves/rejects und vi.useFakeTimers
• Testabdeckung mit @vitest/coverage-v8 messen und Schwellenwerte festlegen
• Funktionen beobachten und ersetzen mit vi.fn und vi.spyOn

Komponenten testen mit Vue Test Utils

• Komponenten montieren mit mount und shallowMount, Props und Slots übergeben
• Aus Nutzersicht testen: render und screen der Testing Library für Vue
• Elemente finden über find, findAll und data-testid, Text und Attribute prüfen
• Ereignisse auslösen mit trigger und setValue, Rendern mit nextTick abwarten
• Ausgelöste Komponenten-Events mit emitted() auswerten
• Snapshot-Tests gezielt für kleine Bausteine statt für ganze Seiten

Stores, Composables und API-Zugriffe testen

• Pinia-Stores isoliert testen mit setActivePinia(createPinia())
• Komponenten mit createTestingPinia aus @pinia/testing und vorbelegtem Zustand
• Composables testen: reaktive Rückgabewerte, Lifecycle-Hooks über eine Hilfskomponente
• Module ersetzen mit vi.mock, etwa die API-Service-Schicht
• HTTP-Aufrufe mit Mock Service Worker abfangen statt echter Backends
• Komponenten mit Router-Abhängigkeit: Testrouter mit createMemoryHistory

Fehlersuche mit Vue DevTools und Chrome DevTools

• Chrome DevTools: Breakpoints in .vue-Dateien über Source Maps, debugger-Anweisung
• Netzwerk-Tab und Konsole: fehlerhafte Requests und Vue-Warnungen auswerten
• Vue DevTools einrichten: Browsererweiterung oder vite-plugin-vue-devtools
• Komponentenbaum, Props und reaktiven Zustand im Inspektor untersuchen
• Zustandsänderungen nachverfolgen: Pinia-Inspektor und Timeline der Vue DevTools
• Fehler zentral abfangen mit app.config.errorHandler und onErrorCaptured
• Performance-Audit mit Lighthouse und dem Performance-Panel, Renderzeiten von Komponenten
• Vitest-Tests im Debugger von VS Code schrittweise ausführen

End-to-End-Tests und CI

• Playwright einrichten: Locators nach Rolle und Text, automatisches Warten
• Erster End-to-End-Test für einen Buchungsablauf, Trace Viewer bei Fehlschlägen
• Cypress-Suiten im Bestand weiterpflegen oder schrittweise nach Playwright überführen
• Tests in der CI mit CircleCI oder GitHub Actions: Caching, Parallelisierung, Berichte
• Merge-Schranke: Lint, Typprüfung, Unit- und End-to-End-Tests als Pflichtschritte

Vue.js-Tests und Fehlersuche mit Claude Code

• Gemeldeten Fehler vom Agenten zuerst als fehlschlagenden Vitest-Test nachstellen lassen
• Geänderte expect-Zeilen gesondert reviewen, damit Tests nicht abgeschwächt werden
• Lücken aus dem Coverage-Bericht als Auftrag, Assertions auf Aussagekraft prüfen
• Playwright-Trace und Konsolenausgabe als Kontext für die Ursachensuche übergeben
• Jest-Suiten per Agent auf Vitest umstellen: jest.fn → vi.fn, Timer und Mocks prüfen

Praxisprojekt: Testsuite für die Kursbuchung einer Kletterhalle

• Komponententests für Kursliste und Buchungsformular mit Vue Test Utils
• Buchungs-Store mit @pinia/testing, Antworten der Buchungs-API über Mock Service Worker
• Gemeldete Doppelbuchung mit den Vue DevTools eingrenzen und per Regressionstest absichern
• Playwright-Test für den Buchungsablauf, alle Prüfungen als CI-Pipeline