Testprojekte

Beispielprojekt

GitHub - Online ausprobieren

WARNING

Diese Funktion war früher als workspace bekannt. workspace ist seit Version 3.2 veraltet und wurde durch die projects-Konfiguration ersetzt. Funktional sind sie gleichwertig.

Vitest bietet die Möglichkeit, mehrere Projektkonfigurationen innerhalb eines einzigen Vitest-Prozesses zu definieren. Diese Funktion ist besonders nützlich für Monorepo-Setups, kann aber auch verwendet werden, um Tests mit verschiedenen Konfigurationen auszuführen, wie z.B. resolve.alias, plugins oder test.browser sowie weiteren Optionen.

Projekte definieren

Sie können Projekte in Ihrer Root-Konfiguration definieren:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: ['packages/*'],
  },
});

Projektkonfigurationen können als Inline-Konfigurationen, Dateipfade oder Glob-Muster angegeben werden, die auf Ihre Projekte verweisen. Wenn Sie beispielsweise einen Ordner namens packages haben, der Ihre Projekte beherbergt, können Sie ein Array in Ihrer Root-Vitest-Konfiguration definieren:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: ['packages/*'],
  },
});

Vitest behandelt jeden Ordner in packages als separates Projekt, auch wenn er keine Konfigurationsdatei enthält. Wenn dieses Glob-Muster auf irgendeine Datei zutrifft, wird sie als Vitest-Konfiguration betrachtet, selbst wenn sie kein vitest im Namen hat oder eine unbekannte Dateierweiterung besitzt.

WARNING

Vitest betrachtet die Root-vitest.config-Datei nicht als Projekt, es sei denn, sie wird explizit in der Konfiguration angegeben. Daher beeinflusst die Root-Konfiguration nur globale Optionen wie reporters und coverage. Beachten Sie, dass Vitest immer bestimmte Plugin-Hooks, wie apply, config, configResolved oder configureServer, ausführt, die in der Root-Konfigurationsdatei angegeben sind. Vitest verwendet auch dieselben Plugins, um globale Setups und benutzerdefinierte Coverage-Provider auszuführen.

Sie können Projekte auch anhand ihrer Konfigurationsdateien referenzieren:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: ['packages/*/vitest.config.{e2e,unit}.ts'],
  },
});

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

Sie können Projekte auch mithilfe von Inline-Konfigurationen definieren. Die Konfiguration unterstützt beide Syntaxen gleichzeitig.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // entspricht jedem Ordner und jeder Datei im Ordner `packages`
      'packages/*',
      {
        // fügen Sie "extends: true" hinzu, um die Optionen aus der Root-Konfiguration zu erben
        extends: true,
        test: {
          include: ['tests/**/*.{browser}.test.{ts,js}'],
          // Es empfiehlt sich, einen Namen zu definieren, wenn Inline-Konfigurationen verwendet werden
          name: 'happy-dom',
          environment: 'happy-dom',
        },
      },
      {
        test: {
          include: ['tests/**/*.{node}.test.{ts,js}'],
          // Die Farbe der Namensanzeige kann geändert werden
          name: { label: 'node', color: 'green' },
          environment: 'node',
        },
      },
    ],
  },
});

WARNING

Alle Projekte müssen eindeutige Namen haben; andernfalls gibt Vitest einen Fehler aus. Wenn in der Inline-Konfiguration kein Name angegeben wird, weist Vitest automatisch eine Nummer zu. Für Projektkonfigurationen, die mit Glob-Syntax definiert sind, verwendet Vitest standardmäßig die Eigenschaft "name" in der nächstgelegenen package.json-Datei oder, falls keine vorhanden ist, den Ordnernamen.

Projekte unterstützen nicht alle Konfigurationseinstellungen. Für eine bessere Typsicherheit verwenden Sie die Methode defineProject anstelle von defineConfig in den Projektkonfigurationsdateien:

// @errors: 2769
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'],
  },
});

Tests ausführen

Um Tests auszuführen, definieren Sie ein Script in Ihrer package.json-Datei im Root-Verzeichnis:

{
  "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 run test

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

npm

npm run test --project e2e

yarn

yarn test --project e2e

pnpm

pnpm run test --project e2e

bun

bun run test --project e2e

TIP

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

npm

npm run test --project e2e --project unit

yarn

yarn test --project e2e --project unit

pnpm

pnpm run test --project e2e --project unit

bun

bun run test --project e2e --project unit

Konfiguration

Keine der Konfigurationsoptionen wird standardmäßig von der Konfigurationsdatei im Root-Verzeichnis geerbt. Sie können eine gemeinsame Konfigurationsdatei erstellen und diese selbst mit der Projektkonfiguration zusammenführen:

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

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

Zusätzlich können Sie die Option extends nutzen, um von Ihrer Root-Konfiguration zu erben. Alle Optionen werden zusammengeführt.

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    pool: 'threads',
    projects: [
      {
        // erbt Optionen aus dieser Konfiguration wie Plugins und Pool
        extends: true,
        test: {
          name: 'unit',
          include: ['**/*.unit.test.ts'],
        },
      },
      {
        // erbt keine Optionen aus dieser Konfiguration
        // dies ist das Standardverhalten
        extends: false,
        test: {
          name: 'integration',
          include: ['**/*.integration.test.ts'],
        },
      },
    ],
  },
});

Nicht unterstützte Optionen

Einige Konfigurationsoptionen sind in einer Projektkonfiguration nicht zulässig. Insbesondere:

• coverage: Coverage wird für den gesamten Prozess erfasst
• reporters: Nur Root-Level-Reporter werden unterstützt
• resolveSnapshotPath: Nur der Root-Level-Resolver wird berücksichtigt
• alle anderen Optionen, die keine Test-Runner beeinflussen

Alle Konfigurationsoptionen, die innerhalb einer Projektkonfiguration nicht unterstützt werden, sind im "Config"-Leitfaden mit einem *-Symbol gekennzeichnet. Sie müssen einmal in der Root-Konfigurationsdatei definiert werden.