Środowisko testowe

Vitest udostępnia opcję environment do uruchamiania kodu w określonym środowisku. Możesz modyfikować zachowanie środowiska za pomocą opcji environmentOptions.

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

• node to domyślne środowisko.
• jsdom emuluje środowisko przeglądarki, udostępniając API przeglądarki. Wykorzystuje pakiet jsdom.
• happy-dom emuluje środowisko przeglądarki, udostępniając API przeglądarki. Jest uważany za szybszy od jsdom, choć brakuje mu niektórych API. Wykorzystuje pakiet happy-dom.
• edge-runtime emuluje środowisko edge-runtime firmy Vercel. Wykorzystuje pakiet @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 statycznych. Jeśli importowanie zewnętrznej zależności kończy się błędem unknown extension .css, musisz ręcznie obsłużyć 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 tym łańcuchu importów: kod źródłowy -> package-1 -> package-2 -> package-3, musisz dodać wszystkie trzy pakiety do server.deps.external.

Wywołania require dla CSS i zasobów w zewnętrznych zależnościach są automatycznie rozwiązywane.

WARNING

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

browser nie jest uważany za środowisko w Vitest. Jeśli chcesz uruchomić część swoich testów w trybie przeglądarki, możesz utworzyć projekt testów.

Środowiska dla określonych plików

Ustawienie opcji environment w konfiguracji zastosuje się do wszystkich plików testowych w projekcie. Aby mieć bardziej szczegółową kontrolę, możesz użyć komentarzy kontrolnych do określenia środowiska dla konkretnych plików. Komentarze kontrolne to komentarze zaczynające 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żesz również ustawić opcję environmentMatchGlobs, określając środowisko według wzorców glob.

Niestandardowe środowisko

Możesz utworzyć własny pakiet, aby rozszerzyć środowisko Vitest. Aby to zrobić, utwórz pakiet o nazwie vitest-environment-${name} lub określ ścieżkę do prawidłowego pliku JS/TS. Ten pakiet powinien eksportować obiekt zgodny z interfejsem Environment:

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

export default <Environment>{
  name: 'custom',
  transformMode: 'ssr',
  // opcjonalne - tylko jeśli obsługujesz pulę "experimental-vm"
  async setupVM() {
    const vm = await import('node:vm');
    const context = vm.createContext();
    return {
      getVmContext() {
        return context;
      },
      teardown() {
        // wywoływane po uruchomieniu wszystkich testów w tym środowisku
      },
    };
  },
  setup() {
    // własna konfiguracja
    return {
      teardown() {
        // wywoływane po uruchomieniu wszystkich testów w tym środowisku
      },
    };
  },
};

WARNING

Vitest wymaga opcji transformMode na 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 też 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 być użyta do przenoszenia właściwości obiektu do globalnej przestrzeni nazw:

interface PopulateOptions {
  // czy funkcje niebędące klasami powinny być powiązane z globalną przestrzenią nazw
  bindFunctions?: boolean;
}

interface PopulateResult {
  // lista wszystkich skopiowanych kluczy, nawet jeśli wartość nie istnieje w oryginalnym obiekcie
  keys: Set<string>;
  // mapa oryginalnych wartości, które mogły zostać nadpisane
  // 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;