Tesztkörnyezet

A Vitest biztosítja az environment opciót a kód specifikus környezetben történő futtatásához. Az environmentOptions opcióval módosítható a környezet viselkedése.

Alapértelmezés szerint az alábbi környezetek használhatók:

• a node az alapértelmezett környezet.
• a jsdom böngészői környezetet emulál a Browser API biztosításával, és a jsdom csomagot használja.
• a happy-dom böngészői környezetet emulál a Browser 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.
• az edge-runtime a Vercel edge-runtime környezetét emulálja, és 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ával meghiúsul, manuálisan kell beágyaznia 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 külső függőségekben lévő CSS és eszközök require hívásai automatikusan feloldódnak.

WARNING

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

A browser nem tekinthető környezetnek a Vitest keretein belül. Ha a tesztek egy részét Böngésző módban szeretné futtatni, létrehozhat egy tesztprojektet.

Környezetek specifikus fájlokhoz

Amikor beállítja az environment opciót a konfigurációjában, az a projekt összes tesztfájljára érvényes lesz. Pontosabb szabályozás érdekében vezérlő kommentekkel adhatja meg a specifikus fájlok környezetét. A vezérlő kommentek olyan megjegyzések, amelyek @vitest-environment-nel kezdődnek, és utána a környezet neve következik:

// @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, amellyel a glob minták alapján határozhatja meg a környezetet.

Egyéni környezet

Létrehozhat saját csomagot a Vitest környezetének 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 útvonalát. Ennek a csomagnak egy Environment típusú objektumot kell exportálnia:

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

export default <Environment>{
  name: 'custom',
  transformMode: 'ssr',
  // opcionális - csak akkor, ha támogatja az "experimental-vm" készletet
  async setupVM() {
    const vm = await import('node:vm');
    const context = vm.createContext();
    return {
      getVmContext() {
        return context;
      },
      teardown() {
        // akkor hívódik meg, miután az összes teszt lefutott ezzel a környezettel
      },
    };
  },
  setup() {
    // egyéni beállítás
    return {
      teardown() {
        // akkor hívódik meg, miután az összes teszt lefutott ezzel a környezettel
      },
    };
  },
};

WARNING

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

A Vitest alapértelmezett környezeteit is elérheti 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ít egy populateGlobal segédfüggvényt is, amellyel az objektum tulajdonságai áthelyezhetők a globális névtérbe:

interface PopulateOptions {
  // a nem osztályfüggvényeket hozzá kell-e kötni a globális névtérhez
  bindFunctions?: boolean;
}

interface PopulateResult {
  // az összes másolt kulcs listája, még akkor is, ha az érték nem létezik az eredeti objektumban
  keys: Set<string>;
  // egy térkép az eredeti objektumról, amelynek értékeit kulcsokkal felülírhatták
  // ezeket az értékeket visszaadhatja a `teardown` függvényből
  originals: Map<string | symbol, any>;
}

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