Erste Schritte

Überblick

Vitest ist ein blitzschnelles Unit-Test-Framework, 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 testen. Vitest wird dabei direkt im Browser ausgeführt und verhält sich fast identisch mit einer lokalen Installation, erfordert aber keine Installation auf Ihrem Computer.

Vitest zu Ihrem Projekt hinzufügen

Video-Anleitung zur Installation

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

TIP

Vitest benötigt Vite >=v3.0.0 und Node >=v14.18

Es wird empfohlen, vitest als Abhängigkeit in Ihrer package.json zu installieren, indem Sie eine der oben genannten Methoden verwenden. Wenn Sie vitest lieber direkt ausführen möchten, können Sie npx vitest verwenden (der Befehl npx ist in npm und Node.js enthalten).

Der Befehl npx führt Befehle entweder aus dem lokalen Verzeichnis node_modules/.bin aus oder installiert die für die Ausführung des Befehls erforderlichen Pakete. Standardmäßig prüft npx, ob der Befehl in $PATH oder in den lokalen Projektbinärdateien vorhanden ist, und führt ihn aus. Wenn der Befehl nicht gefunden wird, wird er vor der Ausführung installiert.

Tests schreiben

Als Beispiel schreiben wir einen einfachen Test, der die Ausgabe 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';

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

Um den Test auszuführen, fügen Sie 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, abhängig von Ihrem Paketmanager. Vitest gibt dann diese Meldung aus:

✓ 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 (transform 23ms, setup 0ms, collect 16ms, tests 2ms, environment 0ms, prepare 106ms)

Weitere Informationen zur Verwendung von Vitest finden Sie im Abschnitt API.

Vitest konfigurieren

Ein wesentlicher Vorteil von Vitest ist die einheitliche Konfiguration mit Vite. Wenn vorhanden, liest vitest Ihre vite.config.ts-Datei, um Plugins und Einstellungen mit Ihrer Vite-Anwendung abzustimmen. Beispielsweise funktionieren Ihre Vite-Konfigurationen für resolve.alias und plugins ohne weitere Anpassung. Wenn Sie während des Testens eine abweichende Konfiguration wünschen, haben Sie folgende Möglichkeiten:

• Erstellen Sie eine vitest.config.ts-Datei, 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 Eigenschaft mode in defineConfig (wird auf test gesetzt, wenn sie nicht überschrieben wird), um bedingt eine andere Konfiguration in vite.config.ts anzuwenden.

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

Wenn Sie Vite nicht als Build-Tool verwenden, können Sie Vitest mit der Eigenschaft test in Ihrer Konfigurationsdatei konfigurieren:

import { defineConfig } from 'vitest/config';

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

TIP

Auch wenn Sie Vite nicht selbst verwenden, ist Vitest für seine Transformationspipeline stark davon abhängig. Daher können Sie auch jede in der Vite-Dokumentation beschriebene Eigenschaft konfigurieren.

Wenn Sie Vite bereits verwenden, fügen Sie die Eigenschaft test in Ihrer Vite-Konfiguration hinzu. Sie müssen außerdem 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: {
    // ...
  },
});

Eine Liste der Konfigurationsoptionen finden Sie in der Konfigurationsreferenz

WARNING

Wenn 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 Ihre Vite-Datei überschreibt und nicht erweitert. Sie können auch die Methode mergeConfig aus den Einträgen 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, dieselbe Datei für Vite und Vitest zu verwenden.

Unterstützung für Workspaces (Arbeitsbereiche)

Führen Sie verschiedene Projektkonfigurationen im selben Projekt mit Vitest Workspaces aus. Sie können eine Liste von Dateien und Ordnern definieren, die Ihren Arbeitsbereich in der Datei vitest.workspace definieren. Die Datei unterstützt die Dateiendungen js/ts/json. Diese Funktion eignet sich hervorragend für Monorepo-Setups.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // you can use a list of glob patterns to define your workspaces
  // Vitest expects a list of config files
  // or directories where there is a config file
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // you can even run the same tests,
  // but with different configs in the same "vitest" process
  {
    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'],
    },
  },
]);

Kommandozeilenschnittstelle (CLI)

In einem Projekt mit installiertem Vitest können Sie die Binärdatei vitest in Ihren npm-Skripten verwenden oder sie direkt mit npx vitest ausführen. Hier sind die Standard-npm-Skripte in einem eingerüsteten Vitest-Projekt:

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

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

Erfahren Sie mehr über die Kommandozeilenschnittstelle

IDE-Integrationen

Wir bieten auch eine offizielle Erweiterung für Visual Studio Code an, um Ihre Testerfahrung 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
graphql	GitHub	Online testen
image-snapshot	GitHub	Online testen
lit	GitHub	Online testen
mocks	GitHub	Online testen
nextjs	GitHub	Online testen
playwright	GitHub
puppeteer	GitHub
react-enzyme	GitHub	Online testen
react-mui	GitHub	Online testen
react-storybook	GitHub	Online testen
react-testing-lib-msw	GitHub	Online testen
react-testing-lib	GitHub	Online testen
react	GitHub	Online testen
ruby	GitHub	Online testen
solid	GitHub	Online testen
svelte	GitHub	Online testen
vitesse	GitHub	Online testen
vue-jsx	GitHub	Online testen
vue	GitHub	Online testen
vue2	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

Verwenden von unveröffentlichten Commits

Wenn Sie nicht auf eine neue Version warten möchten, um die neuesten Funktionen zu testen, können Sie das Vitest-Repository auf Ihren lokalen Rechner klonen und es dann selbst 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

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 zum globalen Verknüpfen von vitest verwendet haben).

Community

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