Vitest UI: visuelles Test-Dashboard für Vue-Projekte

1. Was Vitest UI ist und wofür es gedacht ist

Vitest UI ist die offizielle, browserbasierte Oberfläche des Vitest Test-Runners. Statt Testergebnisse ausschließlich als Textzeilen im Terminal zu lesen, öffnet Vitest UI ein interaktives Dashboard, in dem Tests, Test-Dateien und Testsuiten visuell durchsucht, gefiltert und einzeln erneut ausgeführt werden können. Wichtig zur Einordnung: Vitest UI ersetzt keine Testing-Bibliothek und keine Test-Patterns, sondern ist ausschließlich die Präsentationsschicht für Ergebnisse, die derselbe Vitest-Runner ohnehin produziert.

Für Vue-Projekte ist das besonders relevant, weil Testsuiten mit Component-Tests, Composable-Tests und Integrationstests schnell mehrere hundert einzelne Testfälle umfassen. Eine reine Terminal-Ausgabe zwingt dann zum Scrollen durch lange Listen, um einen einzelnen fehlgeschlagenen Test zu finden. Vitest UI löst genau dieses Problem, indem es Testergebnisse strukturiert, durchsuchbar und filterbar macht, ohne dass ein zusätzliches Werkzeug installiert werden muss, Vitest UI ist Teil des Vitest-Ökosystems selbst.

Ein zweiter Aspekt, der Vitest UI von reinen Terminal-Reportern unterscheidet, ist die direkte Interaktivität. Ein Test lässt sich per Klick isoliert erneut ausführen, ein Modul-Graph zeigt Abhängigkeiten, und Coverage-Daten werden direkt farblich im Quellcode markiert, alles in derselben Ansicht, ohne zwischen mehreren Tools zu wechseln.

2. Vitest UI installieren und starten

Vitest UI ist ein separates, optionales Paket, @vitest/ui, das zusätzlich zu Vitest selbst installiert wird. Nach der Installation reicht der Flag --ui beim Aufruf, um statt der Terminal-Ausgabe das Dashboard im Standardbrowser zu öffnen. Vitest startet dabei intern einen kleinen lokalen Server, der Testergebnisse in Echtzeit an das Dashboard überträgt, während die Tests im Hintergrund weiterlaufen.

Für Vue-Projekte mit Vite als Build-Tool ist die Integration nahtlos, da Vitest ohnehin dieselbe Vite-Konfiguration und denselben Modul-Resolver wiederverwendet. Ein einmal eingerichtetes vitest.config.ts benötigt für Vitest UI keine zusätzliche Konfiguration, der Flag --ui reicht, optional ergänzt um --open false, wenn das Dashboard nicht automatisch im Browser geöffnet werden soll, etwa bei Remote-Entwicklungsumgebungen.

# Install Vitest and the optional UI package
npm install -D vitest @vitest/ui

# Start Vitest with the interactive dashboard
npx vitest --ui

# Keep the UI server running but do not auto-open a browser tab
npx vitest --ui --open false

# vitest.config.ts requires no extra setup for the UI itself

3. Das Dashboard: Testbaum, Filter und Suche

Nach dem Start zeigt Vitest UI links einen hierarchischen Testbaum, gruppiert nach Testdatei und Testsuite, mit Farbcodierung für bestanden, fehlgeschlagen und übersprungen. Ein Suchfeld filtert den Baum live nach Dateinamen oder Testnamen, praktisch bei großen Vue-Projekten mit vielen Component- und Composable-Tests, in denen ein bestimmter Test schnell wiedergefunden werden muss, ohne den kompletten Testlauf erneut zu starten.

Ein Klick auf einen einzelnen Test öffnet die Detailansicht rechts im Dashboard, mit vollständigem Assertion-Verlauf, Ausführungszeit und, im Fehlerfall, dem exakten Diff zwischen erwartetem und tatsächlichem Wert. Für Vue-Component-Tests mit @vue/test-utils zeigt Vitest UI zusätzlich die Konsole-Ausgabe des jeweiligen Tests isoliert an, ohne dass sie sich mit der Ausgabe paralleler Tests vermischt, ein Problem, das bei reiner Terminal-Ausgabe mit parallelisierten Testläufen häufig auftritt.

4. Modul-Graph: Abhängigkeiten eines Tests verstehen

Ein Feature, das reine Terminal-Reporter nicht bieten können, ist der Modul-Graph in Vitest UI. Für jeden Test zeigt ein eigener Tab, welche Module tatsächlich importiert und ausgeführt wurden, inklusive transitiver Abhängigkeiten. Das macht sichtbar, wenn ein vermeintlich isolierter Composable-Test versehentlich einen kompletten Pinia-Store oder einen HTTP-Client mit importiert, was die Testlaufzeit unnötig erhöht und die Isolation des Tests untergräbt.

Für Vue-Projekte mit vielen Barrel-Exports, also Index-Dateien, die mehrere Module zusammenfassen, ist der Modul-Graph besonders aufschlussreich. Häufig zieht ein einzelner Import aus einer solchen Index-Datei ungewollt den gesamten Modulbaum eines Feature-Ordners in den Test, sichtbar wird das erst durch die Graph-Visualisierung von Vitest UI, nicht durch die reine Testlaufzeit im Terminal.

// composables/useCart.spec.ts — an isolated composable test
import { describe, it, expect } from 'vitest'
import { useCart } from './useCart'

describe('useCart', () => {
  it('adds an item and updates the total', () => {
    const { items, total, addItem } = useCart()
    addItem({ id: 1, price: 19.99, quantity: 2 })

    expect(items.value).toHaveLength(1)
    expect(total.value).toBe(39.98)
  })
})

// If useCart imports from a barrel file like "@/composables",
// the Vitest UI module graph reveals every sibling composable
// that gets pulled in as a side effect, not just useCart itself.

5. Coverage-Visualisierung direkt im Dashboard

Wird Vitest mit aktivierter Coverage gestartet, vitest --ui --coverage, integriert Vitest UI die Coverage-Daten direkt in einen eigenen Tab, ohne einen separaten HTML-Report öffnen zu müssen. Jede Datei erscheint mit Prozentangaben für Zeilen, Branches, Funktionen und Statements, und ein Klick auf eine Datei zeigt den Quellcode mit farblicher Markierung, welche Zeilen von Tests abgedeckt sind und welche nicht.

Für Vue Single File Components ist das besonders wertvoll, weil Coverage-Lücken oft in bestimmten v-if-Zweigen im Template oder in selten getesteten Fehlerpfaden im script setup-Block liegen. Die farbliche Markierung direkt im Dashboard von Vitest UI macht solche Lücken sofort sichtbar, ohne dass ein separates Coverage-Tool wie Istanbul manuell in den Browser geladen werden muss, Vitest UI zeigt denselben Report inline.

6. Snapshot-Diffs und Fehlerdetails im Browser

Bei Snapshot-Tests, etwa für gerenderte Vue-Komponenten mit @vue/test-utils und expect(wrapper.html()).toMatchSnapshot(), zeigt Vitest UI den Diff zwischen gespeichertem und aktuellem Snapshot direkt farblich markiert im Browser an, statt als grüne und rote Textzeilen im Terminal. Bei umfangreichen HTML-Snapshots ist das deutlich lesbarer, und ein Button erlaubt es, den Snapshot direkt aus dem Dashboard heraus zu aktualisieren, ohne einen separaten Terminal-Befehl mit -u auszuführen.

Auch bei asynchronen Tests, die mit einem Timeout fehlschlagen, zeigt Vitest UI die vollständige Stack-Trace inklusive der Zeile im Testcode, an der der Timeout ausgelöst wurde, zusammen mit der Konsole-Ausgabe bis zu diesem Zeitpunkt. Das erleichtert die Fehlersuche bei Tests, die etwa auf einen ausbleibenden API-Mock oder einen fehlenden await vor einer asynchronen Vue-Reaktivitätsänderung zurückzuführen sind.

7. Watch-Modus und Rerun-Workflow im Alltag

Vitest UI läuft standardmäßig im Watch-Modus, Änderungen an einer Testdatei oder an einer importierten Quelldatei lösen automatisch einen erneuten Testlauf aus, sichtbar direkt im Dashboard, ohne manuellen Refresh. Für die tägliche Entwicklung eines Vue-Composables bedeutet das: Datei speichern, im offenen Vitest-UI-Tab beobachten, ob der zugehörige Test grün bleibt, ohne zwischen Editor und Terminal-Fenster zu wechseln.

Ein praktischer Workflow-Vorteil ist das gezielte erneute Ausführen einzelner Tests per Klick, ohne die gesamte Testsuite neu zu starten. Bei einer Suite mit mehreren hundert Tests spart das spürbar Zeit gegenüber dem wiederholten vollständigen Terminal-Lauf, besonders wenn ein einzelner, isolierter Component-Test mehrfach angepasst und erneut geprüft werden muss, bevor der komplette Testlauf final bestätigt wird.

// vitest.config.ts — reasonable defaults for the Vitest UI workflow
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
    },
    // Re-run only affected tests on file change, shown live in the UI
    watch: true,
  },
})

8. Vitest UI in CI-Pipelines als Report

Für Continuous Integration ist der interaktive Watch-Modus von Vitest UI nicht direkt relevant, da CI-Läufe einmalig und nicht interaktiv ablaufen. Vitest bietet dafür aber vitest run --reporter=html, das einen statischen HTML-Report im selben visuellen Stil wie Vitest UI erzeugt, inklusive Testbaum, Coverage und Snapshot-Diffs, jedoch ohne den lokalen Live-Server. Dieser Report lässt sich als CI-Artefakt hochladen und im Nachhinein im Browser öffnen.

Für Teams, die Vitest UI im lokalen Entwicklungsalltag nutzen, ist der HTML-Report der konsequente nächste Schritt: Ein fehlgeschlagener Pipeline-Lauf liefert dieselbe vertraute Oberfläche wie beim lokalen Debugging, nur eben als statisches Artefakt statt als Live-Dashboard. Das reduziert den Umstellungsaufwand zwischen lokalem und CI-Debugging erheblich, weil die visuelle Sprache identisch bleibt.

9. Vitest UI im Vergleich zur Terminal-Ausgabe

Die Terminal-Ausgabe von Vitest ist für schnelle CI-Läufe und einfache Projekte weiterhin ausreichend, stößt aber bei größeren Vue-Testsuiten an ihre Grenzen. Die folgende Tabelle stellt Vitest UI und die klassische Terminal-Ausgabe gegenüber.

In der Praxis schließen sich beide Formen nicht aus. Für schnelle CI-Checks bleibt die Text-Ausgabe effizient, für die tägliche lokale Arbeit an einer Vue-Testsuite mit vielen Fällen liefert Vitest UI den entscheidenden Geschwindigkeitsvorteil bei der Fehlersuche.

10. Zusammenfassung

Vitest UI macht Testergebnisse in Vue-Projekten durch einen durchsuchbaren Testbaum, einen Modul-Graph, eingebettete Coverage-Visualisierung und visuelle Snapshot-Diffs deutlich zugänglicher als eine reine Terminal-Ausgabe. Der Watch-Modus mit gezieltem Rerun einzelner Tests beschleunigt die tägliche Arbeit an Component- und Composable-Tests spürbar, ohne dass ein zusätzliches externes Werkzeug installiert werden muss.

Für CI-Pipelines ersetzt der statische HTML-Report von Vitest die interaktive Live-Version, behält aber dieselbe visuelle Sprache bei, sodass lokales Debugging mit Vitest UI und das Nachvollziehen fehlgeschlagener Pipeline-Läufe konsistent bleiben. Wer regelmäßig größere Vue-Testsuiten pflegt, sollte Vitest UI fest im Entwicklungsalltag verankern.

11. FAQ: Vitest UI für Vue-Projekte