테스트 환경

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

기본적으로 다음 환경을 사용할 수 있습니다:

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

INFO

jsdom 또는 happy-dom 환경을 사용할 때, Vitest는 CSS 및 에셋을 가져올 때 Vite와 동일한 규칙을 따릅니다. 외부 종속성 가져오기가 unknown extension .css 오류로 실패하는 경우, 모든 패키지를 server.deps.external에 추가하여 전체 가져오기 체인을 수동으로 인라인해야 합니다. 예를 들어, source code -> package-1 -> package-2 -> package-3 가져오기 체인에서 package-3에서 오류가 발생하면 세 가지 패키지 모두를 server.deps.external에 추가해야 합니다.

외부 종속성 내의 CSS 및 에셋에 대한 require는 자동으로 처리됩니다.

WARNING

"환경"은 Node.js에서 테스트를 실행할 때만 존재합니다.

browser는 Vitest에서 환경으로 간주되지 않습니다. 브라우저 모드를 사용하여 테스트의 일부를 실행하려면 테스트 프로젝트를 생성할 수 있습니다.

특정 파일에 대한 환경

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

// @vitest-environment jsdom

import { expect, test } from 'vitest';

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

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

커스텀 환경

Vitest 환경을 확장하기 위해 자신만의 패키지를 만들 수 있습니다. 이렇게 하려면 vitest-environment-${name}이라는 이름의 패키지를 만들거나 유효한 JS/TS 파일의 경로를 지정하십시오. 해당 패키지는 Environment 형태의 객체를 내보내야 합니다.

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

export default <Environment>{
  name: 'custom',
  transformMode: 'ssr',
  // 선택 사항 - "experimental-vm" 풀을 지원하는 경우에만 해당
  async setupVM() {
    const vm = await import('node:vm');
    const context = vm.createContext();
    return {
      getVmContext() {
        return context;
      },
      teardown() {
        // 해당 환경에서 모든 테스트 실행 후 호출됩니다.
      },
    };
  },
  setup() {
    // 커스텀 설정
    return {
      teardown() {
        // 해당 환경에서 모든 테스트 실행 후 호출됩니다.
      },
    };
  },
};

WARNING

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 {
  // 비클래스 함수를 전역 네임스페이스에 바인딩할지 여부
  bindFunctions?: boolean;
}

interface PopulateResult {
  // 값이 원본 객체에 존재하지 않더라도 복사된 모든 키의 목록
  keys: Set<string>;
  // 키에 의해 재정의되었을 수 있는 원본 객체의 맵
  // 이 값들을 `teardown` 함수 내에서 반환할 수 있습니다.
  originals: Map<string | symbol, any>;
}

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