Arbeitsbereich

Beispielprojekt

GitHub - Online ausprobieren

Vitest bietet integrierte Unterstützung für Monorepos durch eine Arbeitsbereich-Konfigurationsdatei. Sie können einen Arbeitsbereich erstellen, um die Struktur Ihres Projekts zu definieren.

Definieren eines Arbeitsbereichs

Ein Arbeitsbereich benötigt eine vitest.workspace- oder vitest.projects-Datei in seinem Stammverzeichnis (im selben Ordner wie Ihre Konfigurationsdatei, falls vorhanden). Vitest unterstützt die Dateiendungen ts/js/json für diese Datei.

Die Arbeitsbereich-Konfigurationsdatei sollte einen Standardexport mit einer Liste von Dateien oder Glob-Mustern enthalten, die auf Ihre Projekte verweisen. Wenn Sie beispielsweise einen Ordner namens packages haben, der Ihre Projekte enthält, können Sie einen Arbeitsbereich mit dieser Konfigurationsdatei definieren:

vitest.workspace.ts

export default ['packages/*'];

Vitest betrachtet jeden Ordner innerhalb von packages als separates Projekt, selbst wenn darin keine Konfigurationsdatei vorhanden ist.

WARNING

Vitest betrachtet die Root-Konfiguration nur dann als Arbeitsbereich-Projekt (und führt die in include angegebenen Tests aus), wenn sie in dieser Konfiguration explizit angegeben ist.

Sie können auch Projekte anhand ihrer Konfigurationsdateien referenzieren:

vitest.workspace.ts

export default ['packages/*/vitest.config.{e2e,unit}.ts'];

Dieses Muster schließt nur Projekte mit einer vitest.config-Datei ein, deren Name vor der Dateiendung e2e oder unit enthält.

WARNING

Wenn Sie Dateinamen mit einem Glob-Muster verwenden, stellen Sie sicher, dass Ihre Konfigurationsdatei mit vite.config oder vitest.config beginnt. Andernfalls ignoriert Vitest die Datei.

Sie können Projekte auch mit Inline-Konfiguration definieren. Die Arbeitsbereich-Datei unterstützt die gleichzeitige Verwendung beider Syntaxen.

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config';

// defineWorkspace bietet eine gute DX (Developer Experience, Entwicklererfahrung) durch Typ-Hinweise
export default defineWorkspace([
  'packages/*',
  {
    // verwenden Sie "extends", um zwei Konfigurationen zu vereinen
    extends: './vite.config.js',
    test: {
      include: ['tests/**/*.{browser}.test.{ts,js}'],
      // wir empfehlen, einen Namen zu definieren, wenn Inline-Konfigurationen verwendet werden
      name: 'happy-dom',
      environment: 'happy-dom',
    },
  },
  {
    test: {
      include: ['tests/**/*.{node}.test.{ts,js}'],
      name: 'node',
      environment: 'node',
    },
  },
]);

WARNING

Alle Projekte müssen eindeutige Namen haben. Andernfalls gibt Vitest einen Fehler aus. Wenn Sie keinen Namen in der Inline-Konfiguration angeben, weist Vitest automatisch eine Zahl zu. Wenn Sie keinen Namen in einer Projektkonfiguration angeben, die mit der Glob-Syntax definiert wurde, verwendet Vitest standardmäßig den Verzeichnisnamen.

Wenn Sie keine Inline-Konfigurationen verwenden, können Sie einfach eine JSON-Datei in Ihrem Stammverzeichnis erstellen:

vitest.workspace.json

["packages/*"]

Projekte im Arbeitsbereich unterstützen nicht alle Konfigurationseigenschaften. Verwenden Sie zur besseren Typsicherheit die Methode defineProject anstelle der Methode defineConfig in den Projektkonfigurationsdateien:

packages/a/vitest.config.ts

import { defineProject } from 'vitest/config';

export default defineProject({
  test: {
    environment: 'jsdom',
    // "reporters" wird in einer Projektkonfiguration nicht unterstützt,
    // daher wird ein Fehler angezeigt
    reporters: ['json'],
  },
});

Ausführen von Tests

Um Tests im Arbeitsbereich auszuführen, definieren Sie ein Skript in Ihrer Root-package.json:

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

Jetzt können Sie Tests mit Ihrem Paketmanager ausführen:

npm

npm run test

yarn

yarn test

pnpm

pnpm run test

bun

bun test

Wenn Sie Tests nur in einem einzelnen Projekt ausführen möchten, verwenden Sie die CLI-Option --project:

npm run test --project e2e

TIP

Die CLI-Option --project kann mehrmals verwendet werden, um mehrere Projekte auszuwählen:

npm run test --project e2e --project unit

Konfiguration

Keine der Konfigurationsoptionen wird von der Root-Konfiguration vererbt. Sie können eine gemeinsam genutzte Konfigurationsdatei erstellen und diese mit der Projektkonfiguration zusammenführen:

packages/a/vitest.config.ts

import { defineProject, mergeConfig } from 'vitest/config';
import configShared from '../vitest.shared.js';

export default mergeConfig(
  configShared,
  defineProject({
    test: {
      environment: 'jsdom',
    },
  })
);

Einige Konfigurationsoptionen sind in einer Projektkonfiguration nicht erlaubt. Insbesondere:

• coverage: Die Codeabdeckung wird für den gesamten Arbeitsbereich durchgeführt.
• reporters: Es werden nur Reporter auf Root-Ebene unterstützt.
• resolveSnapshotPath: Es wird nur der Resolver auf Root-Ebene berücksichtigt.
• Alle anderen Optionen, die sich nicht auf den Test Runner auswirken.

TIP

Alle Konfigurationsoptionen, die in einer Projektkonfiguration nicht unterstützt werden, sind auf der Seite "Config" mit dem Zeichen * gekennzeichnet.

Codeabdeckung

Die Codeabdeckung für Arbeitsbereich-Projekte funktioniert ohne weitere Konfiguration. Wenn Sie jedoch die Option all aktiviert haben und in einigen Ihrer Projekte ungewöhnliche Dateiendungen verwenden, benötigen Sie ein Plugin, das diese Erweiterung in Ihrer Root-Konfigurationsdatei verarbeitet.

Wenn Sie beispielsweise ein Paket haben, das Vue-Dateien nutzt und eine eigene Konfigurationsdatei hat, aber einige der Dateien nicht in Ihre Tests importiert werden, schlägt die Coverage-Analyse fehl, wenn versucht wird, die Verwendung nicht verwendeter Dateien zu analysieren, da sich die Abdeckung auf die Root-Konfiguration und nicht auf die Projektkonfiguration stützt.