테스트 환경

Vitest는 특정 환경에서 코드를 실행하기 위한 environment 옵션을 제공합니다. environmentOptions 옵션을 사용하여 해당 환경의 동작 방식을 변경할 수 있습니다.

기본적으로 다음과 같은 환경을 사용할 수 있습니다.

• node: 기본 환경입니다.
• jsdom: jsdom 패키지를 사용하여 브라우저 API를 제공하여 브라우저 환경을 에뮬레이트합니다.
• happy-dom: 브라우저 API를 제공하여 브라우저 환경을 에뮬레이트하며, jsdom보다 빠르다고 알려져 있지만 일부 API가 부족할 수 있습니다. happy-dom 패키지를 사용합니다.
• edge-runtime: Vercel의 edge-runtime을 에뮬레이트하며, @edge-runtime/vm 패키지를 사용합니다.

특정 파일을 위한 환경 설정

구성 파일에서 environment 옵션을 설정하면 프로젝트의 모든 테스트 파일에 적용됩니다. 더 세밀하게 제어하려면 컨트롤 주석을 사용하여 특정 파일에 대한 환경을 지정할 수 있습니다. 컨트롤 주석은 @vitest-environment로 시작하며, 뒤에 환경 이름이 따라옵니다.

// @vitest-environment jsdom

import { expect, test } from 'vitest';

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

또는 glob 패턴을 기반으로 환경을 지정하는 environmentMatchGlobs 옵션을 설정할 수도 있습니다.

사용자 정의 환경

0.23.0 버전부터 Vitest 환경을 확장하기 위해 자신만의 패키지를 만들 수 있습니다. 이를 위해서는 vitest-environment-${name} 이름으로 패키지를 만들거나, 유효한 JS 파일의 경로를 지정합니다 (0.34.0 버전부터 지원). 해당 패키지는 Environment 타입의 객체를 export해야 합니다.

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

0.34.0 버전부터 Vitest는 환경 객체에 transformMode 옵션이 필수입니다. ssr 또는 web 중 하나의 값을 가져야 합니다. 이 값은 플러그인이 소스 코드를 변환하는 방식을 결정합니다. ssr로 설정되면 플러그인 후크는 파일을 변환하거나 확인할 때 ssr: true를 받습니다. 그렇지 않으면 ssr은 false로 설정됩니다.

vitest/environments 항목을 통해 기본 Vitest 환경에 접근할 수도 있습니다.

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

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

Vitest는 객체의 속성을 전역 네임스페이스에 복사하는 데 사용할 수 있는 populateGlobal 유틸리티 함수도 제공합니다.

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;