Tesztkörnyezet

A Vitest biztosítja az environment opciót, amellyel a kód egy meghatározott környezetben futtatható. Az environmentOptions opcióval módosíthatja a környezet viselkedését.

Alapértelmezés szerint a következő környezetek használhatók:

• node az alapértelmezett környezet.
• jsdom böngésző környezetet emulál a böngészői API biztosításával, a jsdom csomagot használja.
• happy-dom böngésző környezetet emulál a böngészői API biztosításával, és gyorsabbnak számít, mint a jsdom, de hiányzik belőle néhány API; a happy-dom csomagot használja.
• edge-runtime a Vercel edge-runtime környezetét emulálja, az @edge-runtime/vm csomagot használja.

INFO

A jsdom vagy happy-dom környezetek használatakor a Vitest ugyanazokat a szabályokat követi, mint a Vite a CSS és az eszközök importálásakor. Ha egy külső függőség importálása unknown extension .css hibát eredményez, manuálisan be kell építenie a teljes importálási láncot az összes csomag hozzáadásával a server.deps.external beállításhoz. Például, ha a hiba a package-3 csomagban történik ebben az importálási láncban: forráskód -> package-1 -> package-2 -> package-3, akkor mindhárom csomagot hozzá kell adnia a server.deps.external beállításhoz.

A Vitest 2.0.4 verziótól kezdve a CSS és az eszközök require hívásait automatikusan feloldják a külső függőségeken belül.

WARNING

A környezetek csak akkor léteznek, ha a teszteket Node.js-ben futtatják.

A browser nem számít környezetnek a Vitestben. Ha a tesztek egy részét böngésző módban szeretné futtatni, létrehozhat egy munkaterület-projektet.

Környezetek specifikus fájlokhoz

Amikor beállítja az environment opciót a konfigurációjában, az az összes tesztfájlra vonatkozni fog a projektjében. A finomabb vezérlés érdekében vezérlő kommenteket használhat a specifikus fájlok környezetének megadásához. A vezérlő kommentek @vitest-environment kezdetű kommentek, amelyeket a környezet neve követ:

// @vitest-environment jsdom

import { expect, test } from 'vitest';

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

Vagy beállíthatja az environmentMatchGlobs opciót is, amely a glob minták alapján adja meg a környezetet.

Egyéni környezet

Létrehozhat saját csomagot a Vitest környezet kiterjesztéséhez. Ehhez hozzon létre egy vitest-environment-${name} nevű csomagot, vagy adjon meg egy érvényes JS/TS fájl elérési útját. Ennek a csomagnak egy Environment alakú objektumot kell exportálnia:

import type { Environment } from 'vitest';

export default <Environment>{
  name: 'custom',
  transformMode: 'ssr',
  // optional - only if you support "experimental-vm" pool
  async setupVM() {
    const vm = await import('node:vm');
    const context = vm.createContext();
    return {
      getVmContext() {
        return context;
      },
      teardown() {
        // called after all tests with this env have been run
      },
    };
  },
  setup() {
    // custom setup
    return {
      teardown() {
        // called after all tests with this env have been run
      },
    };
  },
};

WARNING

A Vitest megköveteli a transformMode opciót a környezeti objektumon. Ennek ssr vagy web értékűnek kell lennie. Ez az érték határozza meg, hogy a bővítmények hogyan alakítják át a forráskódot. Ha ssr értékre van állítva, a bővítmény hookok ssr: true értéket kapnak a fájlok átalakításakor vagy feloldásakor. Ellenkező esetben az ssr értéke false.

A Vitest alapértelmezett környezeteihez is hozzáférhet a vitest/environments bejegyzésen keresztül:

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

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

A Vitest biztosítja a populateGlobal segédfüggvényt is, amellyel az objektum tulajdonságai a globális névtérbe helyezhetők át:

interface PopulateOptions {
  // should non-class functions be bind to the global namespace
  bindFunctions?: boolean;
}

interface PopulateResult {
  // a list of all keys that were copied, even if value doesn't exist on original object
  keys: Set<string>;
  // a map of original object that might have been overridden with keys
  // you can return these values inside `teardown` function
  originals: Map<string | symbol, any>;
}

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