Erste Schritte

Überblick

Vitest (ausgesprochen als "veetest") ist ein Test-Framework der nächsten Generation, das auf Vite basiert.

Mehr über die Hintergründe des Projekts erfahren Sie im Abschnitt Warum Vitest.

Vitest online ausprobieren

Sie können Vitest online auf StackBlitz ausprobieren. Dies ermöglicht die Ausführung von Vitest direkt im Browser und entspricht weitgehend einer lokalen Einrichtung, erfordert jedoch keine Installation auf Ihrem Rechner.

Vitest zu Ihrem Projekt hinzufügen

Erfahren Sie, wie Sie es per Video installieren

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest benötigt Vite >=v5.0.0 und Node >=v18.0.0

Es wird empfohlen, vitest als Entwicklungsabhängigkeit in Ihrer package.json zu installieren, indem Sie eine der oben genannten Methoden verwenden. Wenn Sie vitest jedoch direkt ausführen möchten, können Sie npx vitest verwenden (das npx-Tool wird mit npm und Node.js geliefert).

Das npx-Tool führt den angegebenen Befehl aus. Standardmäßig prüft npx zuerst, ob der Befehl in den Binärdateien des lokalen Projekts existiert. Wenn er dort nicht gefunden wird, sucht npx im $PATH des Systems und führt ihn aus, falls er gefunden wird. Wenn der Befehl an keinem der beiden Orte gefunden wird, installiert npx ihn vor der Ausführung an einem temporären Ort.

Tests schreiben

Als Beispiel schreiben wir einen einfachen Test, der die Ausgabe einer Funktion überprüft, die zwei Zahlen addiert.

export function sum(a, b) {
  return a + b;
}

import { expect, test } from 'vitest';
import { sum } from './sum.js';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

TIP

Tests müssen standardmäßig .test. oder .spec. im Dateinamen enthalten.

Um den Test auszuführen, fügen Sie als Nächstes den folgenden Abschnitt zu Ihrer package.json hinzu:

{
  "scripts": {
    "test": "vitest"
  }
}

Führen Sie abschließend npm run test, yarn test oder pnpm test aus, je nach Ihrem Paketmanager, und Vitest wird diese Nachricht ausgeben:

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

WARNING

Falls Sie Bun als Paketmanager verwenden, stellen Sie sicher, dass Sie den Befehl bun run test anstelle von bun test verwenden, da Bun sonst seinen eigenen Test-Runner ausführt.

Erfahren Sie mehr über die Verwendung von Vitest im Abschnitt API.

Vitest konfigurieren

Ein Hauptvorteil von Vitest ist die einheitliche Konfiguration mit Vite. Wenn vorhanden, liest vitest Ihre Hauptdatei vite.config.ts, um die Plugins und die Einrichtung Ihrer Vite-App zu übernehmen. Zum Beispiel funktionieren Ihre Vite resolve.alias und plugins Konfigurationen direkt. Falls Sie während des Testens eine andere Konfiguration wünschen, haben Sie folgende Möglichkeiten:

• Erstellen Sie eine vitest.config.ts, die eine höhere Priorität hat.
• Übergeben Sie die Option --config an die CLI, z.B. vitest --config ./path/to/vitest.config.ts.
• Verwenden Sie process.env.VITEST oder die mode-Eigenschaft in defineConfig (wird auf test gesetzt, wenn nicht überschrieben), um bedingt eine andere Konfiguration in vite.config.ts anzuwenden.

Vitest unterstützt für Ihre Konfigurationsdatei die gleichen Dateierweiterungen wie Vite: .js, .mjs, .cjs, .ts, .cts, .mts. Die Erweiterung .json wird von Vitest nicht unterstützt.

Falls Sie Vite nicht als Build-Tool verwenden, können Sie Vitest über die test-Eigenschaft in Ihrer Konfigurationsdatei konfigurieren:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // ...
  },
});

TIP

Auch wenn Sie Vite selbst nicht verwenden, ist Vitest für seine Transformations-Pipeline stark darauf angewiesen. Aus diesem Grund können Sie auch jede Eigenschaft konfigurieren, die in der Vite-Dokumentation beschrieben ist.

Wenn Sie Vite bereits verwenden, fügen Sie die test-Eigenschaft in Ihre Vite-Konfiguration ein. Sie müssen auch einen Verweis auf Vitest-Typen mittels einer Triple-Slash-Direktive am Anfang Ihrer Konfigurationsdatei hinzufügen.

/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ...
  },
});

Die Direktive <reference types="vitest" /> wird im nächsten Major-Update nicht mehr funktionieren, aber Sie können in Vitest 2.1 mit der Migration zu vitest/config beginnen:

/// <reference types="vitest/config" />
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    // ... Optionen hier angeben.
  },
});

Siehe die Liste der Konfigurationsoptionen in der Konfigurationsreferenz

WARNING

Falls Sie sich entscheiden, zwei separate Konfigurationsdateien für Vite und Vitest zu verwenden, stellen Sie sicher, dass Sie die gleichen Vite-Optionen in Ihrer Vitest-Konfigurationsdatei definieren, da diese die Vite-Datei überschreibt und nicht erweitert. Sie können auch die mergeConfig-Methode aus den Modulen vite oder vitest/config verwenden, um die Vite-Konfiguration mit der Vitest-Konfiguration zusammenzuführen:

vitest.config.mjs

import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config.mjs';

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      // ...
    },
  })
);

vite.config.mjs

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue()],
});

Wir empfehlen jedoch, für Vite und Vitest dieselbe Datei zu verwenden, anstatt zwei separate Dateien zu erstellen.

Projektunterstützung

Führen Sie verschiedene Projektkonfigurationen innerhalb desselben Projekts mithilfe von Testprojekten aus. Sie können eine Liste von Dateien und Ordnern definieren, die Ihre Projekte in der Datei vitest.config festlegen.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // Sie können eine Liste von Glob-Mustern verwenden, um Ihre Projekte zu definieren.
      // Vitest erwartet eine Liste von Konfigurationsdateien
      // oder Verzeichnissen, die eine Konfigurationsdatei enthalten.
      'packages/*',
      'tests/*/vitest.config.{e2e,unit}.ts',
      // Sie können sogar dieselben Tests ausführen,
      // aber mit unterschiedlichen Konfigurationen im selben "vitest"-Prozess.
      {
        test: {
          name: 'happy-dom',
          root: './shared_tests',
          environment: 'happy-dom',
          setupFiles: ['./setup.happy-dom.ts'],
        },
      },
      {
        test: {
          name: 'node',
          root: './shared_tests',
          environment: 'node',
          setupFiles: ['./setup.node.ts'],
        },
      },
    ],
  },
});

Befehlszeilenschnittstelle

In einem Projekt, in dem Vitest installiert ist, können Sie die vitest-Binärdatei in Ihren npm-Skripten verwenden oder sie direkt mit npx vitest ausführen. Hier sind die Standard-npm-Skripte in einem neu erstellten Vitest-Projekt:

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

Um Tests einmalig auszuführen, ohne Dateiänderungen zu überwachen, verwenden Sie vitest run. Sie können zusätzliche CLI-Optionen wie --port oder --https angeben. Eine vollständige Liste der CLI-Optionen erhalten Sie, indem Sie npx vitest --help in Ihrem Projekt ausführen.

Erfahren Sie mehr über die Befehlszeilenschnittstelle

Automatische Abhängigkeitsinstallation

Vitest wird Sie auffordern, bestimmte Abhängigkeiten zu installieren, falls diese noch nicht installiert sind. Sie können dieses Verhalten deaktivieren, indem Sie die Umgebungsvariable VITEST_SKIP_INSTALL_CHECKS=1 setzen.

IDE-Integrationen

Wir haben auch eine offizielle Erweiterung für Visual Studio Code bereitgestellt, um Ihr Testerlebnis mit Vitest zu verbessern.

Installation vom VS Code Marketplace

Erfahren Sie mehr über IDE-Integrationen

Beispiele

Beispiel	Quelle	Playground
basic	GitHub	Online ausprobieren
fastify	GitHub	Online ausprobieren
in-source-test	GitHub	Online ausprobieren
lit	GitHub	Online ausprobieren
vue	GitHub	Online ausprobieren
marko	GitHub	Online ausprobieren
preact	GitHub	Online ausprobieren
react	GitHub	Online ausprobieren
solid	GitHub	Online ausprobieren
svelte	GitHub	Online ausprobieren
sveltekit	GitHub	Online ausprobieren
profiling	GitHub	Nicht verfügbar
typecheck	GitHub	Online ausprobieren
projects	GitHub	Online ausprobieren

Projekte, die Vitest verwenden

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• vitesse
• vitesse-lite
• fluent-vue
• vueuse
• milkdown
• gridjs-svelte
• spring-easing
• bytemd
• faker
• million
• Vitamin
• neodrag
• svelte-multiselect
• iconify
• tdesign-vue-next
• cz-git

Verwendung unveröffentlichter Commits

Jeder Commit im Hauptzweig und jeder Pull Request mit dem Label cr-tracked werden auf pkg.pr.new veröffentlicht. Sie können es über npm i https://pkg.pr.new/vitest@{commit} installieren.

Wenn Sie Ihre eigene Modifikation lokal testen möchten, können Sie sie erstellen und verknüpfen (pnpm ist erforderlich):

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # Sie können Ihren bevorzugten Paketmanager für diesen Schritt verwenden

Gehen Sie dann zu dem Projekt, in dem Sie Vitest verwenden, und führen Sie pnpm link --global vitest aus (oder den Paketmanager, den Sie für die globale Verknüpfung von vitest genutzt haben).

Community

Wenn Sie Fragen haben oder Hilfe benötigen, wenden Sie sich an die Community auf Discord und GitHub Discussions.