0Pricing
Vue Academy · Lektion

Vitest-Einrichtung für Vue-Projekte

vitest.config.ts, jsdom-Umgebung, @vue/test-utils, Coverage mit v8 und Testskript

Vitest-Einrichtung für Vue-Projekte ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Vitest für Vue?

Vitest ist ein schneller Test-Runner, der auf Vite basiert. Da Vue-3-Projekte bereits Vite verwenden, nutzt Vitest dieselbe Konfiguration und dieselben Transformationen – für Tests ist keine separate Build-Pipeline erforderlich.

Vitest bietet eine Jest-ähnliche API mit nativer Unterstützung für ESM und TypeScript.

Die erforderlichen Tools installieren

Fügen Sie Vitest, die Vue-Testutilities und jsdom hinzu – ein browserähnliches DOM für Node.

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

Die jsdom-Umgebung

Komponenten benötigen ein DOM, in das sie eingebunden werden können. Node besitzt kein DOM, daher laufen Tests in jsdom, das Browser-APIs simuliert. Legen Sie es in der Konfiguration als Testumgebung fest.

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "jsdom",
  },
})

Globale Variablen aktivieren

Standardmäßig importieren Sie describe, it und expect in jeder Datei. Mit globals: true sind sie wie bei Jest überall ohne Importe verfügbar.

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

TypeScript-Typen für globale Variablen

Wenn Sie globale Variablen mit TypeScript verwenden, fügen Sie die Vitest-Typen hinzu, damit der Editor describe und die zugehörigen Funktionen kennt.

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

Die erste Testdatei

Vitest erkennt Dateien, die mit .test.ts oder .spec.ts enden. Wenn globale Variablen aktiviert sind, können Sie Tests direkt schreiben.

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

Eine Komponente mounten

Wenn @vue/test-utils installiert und jsdom konfiguriert ist, können Sie echte Komponenten in einem Test mounten und ihre gerenderte Ausgabe überprüfen.

import { mount } from "@vue/test-utils"
import Hello from "./Hello.vue"

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

Testabdeckung hinzufügen

Die Testabdeckung zeigt, welche Zeilen von Ihren Tests ausgeführt werden. Vitest unterstützt den v8-Provider (schnell und nativ). Konfigurieren Sie ihn unter test.coverage.

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

Der HTML-Bericht zur Testabdeckung

Der html-Reporter erstellt einen Bericht, den Sie im Browser durchsuchen können (standardmäßig coverage/index.html). Öffnen Sie ihn, um die Zeilen- und Branch-Abdeckung pro Datei sowie hervorgehobene Lücken zu sehen.

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

package.json-Skripte

Richten Sie praktische Skripte ein. test führt die Testsuite aus, coverage führt sie mit dem Coverage-Flag aus.

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

Watch- und Run-Modus

vitest bleibt im Watch-Modus und führt beim Speichern betroffene Tests erneut aus – ideal während der Entwicklung. In der CI benötigen Sie einen einzigen Durchlauf, der beendet wird; verwenden Sie dafür vitest run.

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

Schnelltest

Überprüfen Sie Ihr Verständnis der Vitest-Einrichtung.

Zusammenfassung

Sie haben Vitest für ein Vue-Projekt konfiguriert:

  • Installieren Sie vitest, @vue/test-utils, jsdom und einen Provider für die Testabdeckung.
  • Setzen Sie environment: "jsdom", damit Komponenten ein DOM besitzen.
  • Mit globals: true vermeiden Sie den Import von Test-Hilfsfunktionen; fügen Sie vitest/globals zu den Types in tsconfig hinzu.
  • Konfigurieren Sie die Testabdeckung mit dem v8-Provider und einem html-Reporter.
  • Fügen Sie die Skripte test und coverage hinzu; verwenden Sie in der CI vitest run.

Häufig gestellte Fragen

Ist die Lektion „Vitest-Einrichtung für Vue-Projekte“ kostenlos?

Ja — der vollständige Text von „Vitest-Einrichtung für Vue-Projekte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Vitest-Einrichtung für Vue-Projekte“?

vitest.config.ts, jsdom-Umgebung, @vue/test-utils, Coverage mit v8 und Testskript Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Vitest-Einrichtung für Vue-Projekte“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Vitest-Einrichtung für Vue-Projekte
  2. Komponenten mounten und abfragen
  3. Benutzerinteraktionen und Ereignisse testen
  4. Composables, Stores und APIs mocken
← Zurück zu Vue Academy