Testumgebung

Vitest bietet die Option environment zur Ausführung von Code in einer bestimmten Umgebung. Das Verhalten der Umgebung lässt sich mit der Option environmentOptions anpassen.

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

• node ist die Standardumgebung.
• jsdom emuliert eine Browserumgebung, indem es die Browser-API bereitstellt und das Paket jsdom verwendet.
• happy-dom emuliert eine Browserumgebung, indem es die Browser-API bereitstellt. Es gilt zwar als schneller als jsdom, bietet aber nicht den vollen API-Umfang. 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. Wenn der Import einer externen Abhängigkeit mit dem Fehler unknown extension .css fehlschlägt, müssen Sie die gesamte Importkette manuell einbinden, indem Sie alle Pakete zu server.deps.external hinzufügen. Wenn der Fehler beispielsweise in package-3 in dieser Importkette auftritt: Quellcode -> package-1 -> package-2 -> package-3, müssen Sie alle drei Pakete zu server.deps.external hinzufügen.

Die require-Anweisungen für CSS und Assets innerhalb der externen Abhängigkeiten werden automatisch aufgelöst.

WARNING

Umgebungen existieren nur, wenn Tests in Node.js ausgeführt werden.

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

Umgebungen für bestimmte Dateien

Die Option environment in Ihrer Konfiguration gilt für alle Testdateien in Ihrem Projekt. Für eine präzisere Steuerung können Sie Steuerkommentare verwenden, um die Umgebung für bestimmte Dateien festzulegen. Steuerkommentare sind Kommentare, die mit @vitest-environment beginnen, gefolgt vom Umgebungsnamen:

// @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 den Glob-Mustern spezifiziert.

Benutzerdefinierte Umgebung

Sie können Ihr eigenes Paket erstellen, um die Vitest-Umgebung zu erweitern. Dazu erstellen Sie ein Paket mit dem Namen vitest-environment-${name} oder geben den Pfad zu einer gültigen JS/TS-Datei an. Dieses Paket sollte ein Objekt vom Typ Environment exportieren:

import type { Environment } from 'vitest/environments';

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 aufgerufen, nachdem alle Tests mit dieser Umgebung ausgeführt wurden
      },
    };
  },
  setup() {
    // benutzerdefinierte Einrichtung
    return {
      teardown() {
        // wird aufgerufen, nachdem alle Tests mit dieser Umgebung ausgeführt wurden
      },
    };
  },
};

WARNING

Vitest erfordert die Option transformMode am Umgebungsobjekt. Der Wert muss ssr oder web sein. Dieser Wert bestimmt, wie Plugins den Quellcode transformieren. Ist er auf ssr gesetzt, erhalten Plugin-Hooks beim Transformieren oder Auflösen von Dateien ssr: true. Andernfalls ist ssr auf false gesetzt.

Sie können auch auf die standardmäßigen Vitest-Umgebungen über den Eintrag vitest/environments zugreifen:

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 übertragen werden können:

interface PopulateOptions {
  // Sollen Nicht-Klassenfunktionen an den globalen Namespace gebunden werden
  bindFunctions?: boolean;
}

interface PopulateResult {
  // Eine Liste aller kopierten Schlüssel, auch wenn der Wert im Originalobjekt nicht existiert
  keys: Set<string>;
  // Eine Map des Originalobjekts, das möglicherweise mit Schlüsseln überschrieben wurde
  // 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;