Środowisko testowe

Vitest oferuje opcję environment do uruchamiania kodu w wybranym środowisku. Zachowanie środowiska można modyfikować za pomocą opcji environmentOptions.

Domyślnie dostępne są następujące środowiska:

• node jest środowiskiem domyślnym.
• jsdom emuluje środowisko przeglądarki, udostępniając jej API; wykorzystuje pakiet jsdom.
• happy-dom emuluje środowisko przeglądarki, udostępniając jej API. Jest uważany za szybszy od jsdom, choć nie implementuje wszystkich API; wykorzystuje pakiet happy-dom.
• edge-runtime emuluje edge-runtime Vercela, używając pakietu @edge-runtime/vm.

INFO

Podczas korzystania ze środowisk jsdom lub happy-dom, Vitest przestrzega tych samych zasad, co Vite podczas importowania CSS i zasobów. Jeśli importowanie zewnętrznej zależności zakończy się błędem unknown extension .css, należy ręcznie zintegrować cały łańcuch importów, dodając wszystkie pakiety do server.deps.external. Na przykład, jeśli błąd występuje w package-3 w łańcuchu: kod źródłowy -> package-1 -> package-2 -> package-3, należy dodać wszystkie trzy pakiety do server.deps.external.

Od Vitest 2.0.4, require dla CSS i zasobów wewnątrz zewnętrznych zależności jest automatycznie rozwiązywane.

WARNING

Środowiska istnieją tylko podczas uruchamiania testów w Node.js.

browser nie jest traktowany jako środowisko w Vitest. Aby uruchomić część testów w trybie przeglądarki, można utworzyć projekt workspace'u.

Środowiska dla określonych plików

Ustawienie opcji environment w konfiguracji będzie miało zastosowanie do wszystkich plików testowych w projekcie. Aby uzyskać bardziej szczegółową kontrolę, można użyć komentarzy kontrolnych do określenia środowiska dla konkretnych plików. Komentarze kontrolne to komentarze, które zaczynają się od @vitest-environment, po których następuje nazwa środowiska:

// @vitest-environment jsdom

import { expect, test } from 'vitest';

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

Można również ustawić opcję environmentMatchGlobs, określając środowisko w oparciu o wzorce glob.

Niestandardowe środowisko

Można stworzyć własny pakiet w celu rozszerzenia środowiska Vitest. Aby to zrobić, należy utworzyć pakiet o nazwie vitest-environment-${name} lub określić ścieżkę do poprawnego pliku JS/TS. Ten pakiet powinien eksportować obiekt o strukturze Environment:

import type { Environment } from 'vitest';

export default <Environment>{
  name: 'custom',
  transformMode: 'ssr',
  // opcjonalne - tylko jeśli wspierasz pulę "experimental-vm"
  async setupVM() {
    const vm = await import('node:vm');
    const context = vm.createContext();
    return {
      getVmContext() {
        return context;
      },
      teardown() {
        // wywoływane po zakończeniu wszystkich testów z tym środowiskiem
      },
    };
  },
  setup() {
    // niestandardowe ustawienia
    return {
      teardown() {
        // wywoływane po zakończeniu wszystkich testów z tym środowiskiem
      },
    };
  },
};

WARNING

Vitest wymaga opcji transformMode w obiekcie środowiska. Powinna być równa ssr lub web. Ta wartość określa, jak wtyczki będą przekształcać kod źródłowy. Jeśli jest ustawiona na ssr, hooki wtyczek otrzymają ssr: true podczas przekształcania lub rozwiązywania plików. W przeciwnym razie ssr jest ustawione na false.

Masz również dostęp do domyślnych środowisk Vitest poprzez wpis vitest/environments:

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

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

Vitest udostępnia również funkcję pomocniczą populateGlobal, która może służyć do przenoszenia właściwości z obiektu do globalnej przestrzeni nazw:

interface PopulateOptions {
  // czy funkcje niebędące klasami powinny być przypisane do globalnej przestrzeni nazw
  bindFunctions?: boolean;
}

interface PopulateResult {
  // lista wszystkich skopiowanych kluczy, nawet jeśli wartość nie występuje w oryginalnym obiekcie
  keys: Set<string>;
  // mapa oryginalnych wartości obiektu, które mogły zostać nadpisane przez nowe wartości przypisane do tych kluczy
  // możesz zwrócić te wartości w funkcji `teardown`
  originals: Map<string | symbol, any>;
}

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