테스트 환경

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

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

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

INFO

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

Vitest 2.0.4부터 외부 종속성 내의 CSS 및 assets에 대한 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';

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;