Testumgebung

Vitest bietet die Option environment, um Code in einer spezifischen Umgebung auszuführen. Das Verhalten dieser Umgebung kann mit der Option environmentOptions angepasst werden.

Standardmäßig stehen Ihnen folgende Umgebungen zur Verfügung:

• node ist die Standardumgebung.
• jsdom emuliert eine Browserumgebung durch Bereitstellung von Browser-APIs und verwendet das Paket jsdom.
• happy-dom emuliert ebenfalls eine Browserumgebung durch Bereitstellung von Browser-APIs. Es wird als schneller als jsdom angesehen, wobei jedoch einige APIs fehlen können. Es verwendet das Paket happy-dom.
• edge-runtime emuliert Vercels edge-runtime und verwendet das Paket @edge-runtime/vm.

INFO

Bei der Verwendung der Umgebungen jsdom oder happy-dom folgt Vitest denselben Regeln wie Vite beim Importieren von CSS und Assets. Sollte der Import einer externen Abhängigkeit mit dem Fehler unknown extension .css fehlschlagen, müssen Sie die gesamte Importkette manuell einbinden, indem Sie alle beteiligten Pakete zu server.deps.external hinzufügen. Tritt der Fehler beispielsweise in package-3 innerhalb der Importkette Quellcode -> package-1 -> package-2 -> package-3 auf, müssen Sie alle drei Pakete zu server.deps.external hinzufügen.

Seit Vitest 2.0.4 werden require-Anweisungen für CSS und Assets innerhalb externer Abhängigkeiten automatisch aufgelöst.

WARNING

„Umgebungen“ existieren ausschließlich, wenn Tests in Node.js ausgeführt werden.

browser wird in Vitest nicht als Umgebung betrachtet. Wenn Sie einen Teil Ihrer Tests im Browser-Modus ausführen möchten, können Sie ein Workspace-Projekt erstellen.

Umgebungen für spezifische Dateien

Wenn Sie die Option environment in Ihrer Konfiguration festlegen, gilt diese für alle Testdateien in Ihrem Projekt. Für eine präzisere Kontrolle können Sie Steuerkommentare verwenden, um die Umgebung für bestimmte Dateien festzulegen. Steuerkommentare sind Kommentare, die mit @vitest-environment beginnen und dem Umgebungsnamen folgen:

// @vitest-environment jsdom

import { expect, test } from 'vitest';

test('test', () => {
  expect(typeof window).not.toBe('undefined');
});

Alternativ können Sie auch die Option environmentMatchGlobs festlegen, die die Umgebung basierend auf Glob-Mustern spezifiziert.

Benutzerdefinierte Umgebung

Sie können Ihr eigenes Paket erstellen, um die Vitest-Umgebung zu erweitern. Erstellen Sie dazu ein Paket namens vitest-environment-${name} oder geben Sie einen Pfad zu einer gültigen JS/TS-Datei an. Dieses Paket sollte ein Objekt im Format eines Environment-Objekts exportieren:

import type { Environment } from 'vitest';

export default <Environment>{
  name: 'custom',
  transformMode: 'ssr',
  // optional: nur wenn Sie den "experimental-vm"-Pool unterstützen
  async setupVM() {
    const vm = await import('node:vm');
    const context = vm.createContext();
    return {
      getVmContext() {
        return context;
      },
      teardown() {
        // wird nach der Ausführung aller Tests mit dieser Umgebung aufgerufen
      },
    };
  },
  setup() {
    // benutzerdefinierte Einrichtung
    return {
      teardown() {
        // wird nach der Ausführung aller Tests mit dieser Umgebung aufgerufen
      },
    };
  },
};

WARNING

Vitest erfordert die Option transformMode für das Umgebungsobjekt. Sie muss entweder ssr oder web sein. Dieser Wert legt fest, wie Plugins den Quellcode transformieren. Wenn dieser Wert auf ssr gesetzt ist, erhalten Plugin-Hooks ssr: true beim Transformieren oder Auflösen von Dateien. Andernfalls wird ssr auf false gesetzt.

Sie haben auch Zugriff auf die Standardumgebungen von Vitest über den Eintrag vitest/environments:

import { builtinEnvironments, populateGlobal } from 'vitest/environments';

console.log(builtinEnvironments); // { jsdom, happy-dom, node, edge-runtime }

Vitest bietet auch die Hilfsfunktion populateGlobal, mit der Eigenschaften von einem Objekt in den globalen Namensraum verschoben werden können:

interface PopulateOptions {
  // Ob Nicht-Klassen-Funktionen an den globalen Namensraum gebunden werden sollen.
  bindFunctions?: boolean;
}

interface PopulateResult {
  // eine Liste aller kopierten Schlüssel, auch wenn der Wert im Originalobjekt nicht vorhanden ist
  keys: Set<string>;
  // eine Map der ursprünglichen Werte, die möglicherweise durch neue Schlüssel überschrieben wurden
  // Sie können diese Werte innerhalb der `teardown`-Funktion zurückgeben
  originals: Map<string | symbol, any>;
}

export function populateGlobal(
  global: any,
  original: any,
  options: PopulateOptions
): PopulateResult;