Erste Schritte

Überblick

Vitest (ausgesprochen als "vee-test") ist ein Testframework der nächsten Generation, das auf Vite basiert.

Erfahren Sie mehr über die Gründe für dieses Projekt im Abschnitt Warum Vitest.

Vitest online ausprobieren

Sie können Vitest online auf StackBlitz ausprobieren. Es führt Vitest direkt im Browser aus und ist nahezu identisch mit einer lokalen Einrichtung, erfordert jedoch keine Installation auf Ihrem Rechner.

Vitest zu Ihrem Projekt hinzufügen

Installation per Video-Anleitung lernen

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 lokalen Projekt-Binärdateien existiert. Falls nicht vorhanden, durchsucht npx den System-$PATH 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 das Ergebnis einer Funktion überprüft, die zwei Zahlen addiert.

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

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

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

TIP

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

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

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

Führen Sie schließlich npm run test, yarn test oder pnpm test aus, je nach Ihrem Paketmanager. Vitest wird dann folgende Meldung 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

Wenn 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

Einer der Hauptvorteile von Vitest ist seine einheitliche Konfiguration mit Vite. Falls vorhanden, liest vitest Ihre vite.config.ts-Datei im Stammverzeichnis, um die Plugins und die Einrichtung Ihrer Vite-App zu übernehmen. Zum Beispiel funktionieren Ihre Vite resolve.alias und plugins Konfigurationen direkt. Wenn Sie eine abweichende Konfiguration während des Testens wünschen, können Sie:

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

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

Wenn Sie Vite nicht als Ihr 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, verlässt sich Vitest stark darauf für seine Transformations-Pipeline. 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 mit einer Triple-Slash-Direktive am Anfang Ihrer Konfigurationsdatei hinzufügen.

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

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

Die <reference types="vitest" />-Direktive wird in Vitest 3 nicht mehr funktionieren. Sie können jedoch bereits 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

Wenn Sie sich für zwei separate Konfigurationsdateien für Vite und Vitest entscheiden, stellen Sie sicher, dass Sie die gleichen Vite-Optionen in Ihrer Vitest-Konfigurationsdatei definieren. Diese überschreibt nämlich Ihre Vite-Datei, anstatt sie zu erweitern. Sie können auch die mergeConfig-Methode aus den vite- oder vitest/config-Einträgen 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, dieselbe Datei für Vite und Vitest zu verwenden, anstatt zwei separate Dateien zu erstellen.

Workspaces-Unterstützung

Verwalten Sie verschiedene Projektkonfigurationen innerhalb desselben Projekts mit Vitest Workspaces. Sie können eine Liste von Dateien und Ordnern festlegen, die Ihren Workspace in der Datei vitest.workspace definieren. Die Datei unterstützt js/ts/json-Erweiterungen. Diese Funktion eignet sich hervorragend für Monorepo-Setups.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // Sie können eine Liste von Glob-Mustern verwenden, um Ihre Workspaces 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 verschiedenen 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 mit installiertem Vitest können Sie das vitest-Binary in Ihren npm-Skripten verwenden oder es direkt mit npx vitest ausführen. Hier sind die Standard-npm-Skripte in einem vorkonfigurierten Vitest-Projekt:

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

Um Tests einmal auszuführen, ohne auf Dateiänderungen zu warten, verwenden Sie vitest run. Sie können zusätzliche CLI-Optionen wie --port oder --https hinzufügen. 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 fordert zur Installation bestimmter Abhängigkeiten auf, 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 bieten auch eine offizielle Erweiterung für Visual Studio Code an, 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 testen
fastify	GitHub	Online testen
in-source-test	GitHub	Online testen
lit	GitHub	Online testen
vue	GitHub	Online testen
marko	GitHub	Online testen
preact	GitHub	Online testen
react	GitHub	Online testen
solid	GitHub	Online testen
svelte	GitHub	Online testen
sveltekit	GitHub	Online testen
profiling	GitHub	Nicht verfügbar
typecheck	GitHub	Online testen
workspace	GitHub	Online testen

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 diese Version mit npm i https://pkg.pr.new/vitest@{commit} installieren.

Wenn Sie Ihre eigenen Änderungen lokal testen möchten, können Sie das Projekt selbst bauen 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

Wechseln 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 verwendet haben).

Community

Wenn Sie Fragen haben oder Unterstützung benötigen, wenden Sie sich an die Community unter Discord und GitHub Discussions.