워크스페이스

샘플 프로젝트

GitHub - 온라인에서 실행해보기

Vitest는 워크스페이스 설정 파일을 통해 모노레포를 기본적으로 지원합니다. 워크스페이스를 생성하여 프로젝트 설정을 정의할 수 있습니다.

워크스페이스 정의

워크스페이스는 루트 디렉터리에 vitest.workspace 또는 vitest.projects 파일을 가지고 있어야 합니다 (구성 파일이 있는 경우, 해당 파일과 동일한 폴더에 위치해야 합니다). Vitest는 이 파일에 대해 ts/js/json 확장자를 지원합니다.

워크스페이스 구성 파일은 프로젝트를 참조하는 파일 또는 Glob 패턴 목록을 기본 내보내기 형태로 가져야 합니다. 예를 들어, packages라는 폴더가 있고 해당 폴더에 프로젝트가 포함되어 있는 경우, 다음 구성 파일로 워크스페이스를 정의할 수 있습니다.

vitest.workspace.ts

export default ['packages/*'];

Vitest는 packages 내의 모든 폴더를 구성 파일 유무와 관계없이 별도의 프로젝트로 간주합니다.

WARNING

Vitest는 루트 구성을 워크스페이스 프로젝트로 간주하지 않습니다. 따라서 이 구성에 지정되지 않은 경우 include에 지정된 테스트는 실행되지 않습니다.

프로젝트를 구성 파일로 참조할 수도 있습니다.

vitest.workspace.ts

export default ['packages/*/vitest.config.{e2e,unit}.ts'];

이 패턴은 파일 확장자 앞에 e2e 또는 unit이 포함된 vitest.config 파일을 가진 프로젝트만 포함합니다.

WARNING

Glob 패턴으로 파일 이름을 참조하는 경우 구성 파일 이름이 vite.config 또는 vitest.config로 시작하는지 확인해야 합니다. 그렇지 않으면 Vitest가 해당 파일을 건너뜁니다.

인라인 설정을 사용하여 프로젝트를 정의할 수도 있습니다. 워크스페이스 파일에서는 이 두 가지 방법을 동시에 사용할 수 있습니다.

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config';

// defineWorkspace는 향상된 타입 힌트 기능을 제공하여 개발 경험(DX)을 개선합니다.
export default defineWorkspace([
  'packages/*',
  {
    // 두 설정을 병합하려면 "extends" 속성을 사용하십시오.
    extends: './vite.config.js',
    test: {
      include: ['tests/**/*.{browser}.test.{ts,js}'],
      // 인라인 구성을 사용할 때 이름을 정의하는 것이 좋습니다.
      name: 'happy-dom',
      environment: 'happy-dom',
    },
  },
  {
    test: {
      include: ['tests/**/*.{node}.test.{ts,js}'],
      name: 'node',
      environment: 'node',
    },
  },
]);

WARNING

모든 프로젝트는 고유한 이름을 가져야 합니다. 그렇지 않으면 Vitest에서 오류가 발생합니다. 인라인 구성 내부에 이름을 제공하지 않으면 Vitest에서 숫자를 할당합니다. glob 구문으로 정의된 프로젝트 구성 내부에 이름을 제공하지 않으면 Vitest는 기본적으로 디렉터리 이름을 사용합니다.

인라인 구성에 크게 의존하지 않는 경우 루트 디렉터리에 간단한 JSON 파일을 생성할 수 있습니다.

vitest.workspace.json

["packages/*"]

워크스페이스 프로젝트는 모든 구성 속성을 지원하지 않습니다. 타입 안전성을 높이기 위해 프로젝트 구성 파일 내부에서 defineConfig 메서드 대신 defineProject를 사용하십시오.

packages/a/vitest.config.ts

import { defineProject } from 'vitest/config';

export default defineProject({
  test: {
    environment: 'jsdom',
    // "reporters"는 프로젝트 구성에서 지원되지 않으므로
    // 오류가 발생합니다.
    reporters: ['json'],
  },
});

테스트 실행

워크스페이스 내부에서 테스트를 실행하려면 루트 package.json에 스크립트를 정의하십시오.

{
  "scripts": {
    "test": "vitest"
  }
}

이제 패키지 매니저를 통해 테스트를 실행할 수 있습니다.

npm

npm run test

yarn

yarn test

pnpm

pnpm run test

bun

bun test

특정 프로젝트에서만 테스트를 실행해야 하는 경우 --project CLI 옵션을 사용하십시오.

npm run test --project e2e

TIP

CLI 옵션 --project는 여러 프로젝트를 필터링하기 위해 여러 번 사용할 수 있습니다.

npm run test --project e2e --project unit

구성

구성 옵션은 루트 수준의 구성 파일에서 상속되지 않습니다. 공유 구성 파일을 만들고 프로젝트 구성과 직접 병합할 수 있습니다.

packages/a/vitest.config.ts

import { defineProject, mergeConfig } from 'vitest/config';
import configShared from '../vitest.shared.js';

export default mergeConfig(
  configShared,
  defineProject({
    test: {
      environment: 'jsdom',
    },
  })
);

또한 일부 구성 옵션은 프로젝트 구성에서 허용되지 않습니다. 특히 다음 옵션에 유의하십시오.

• coverage: 커버리지는 전체 워크스페이스에 대해 수행됩니다.
• reporters: 루트 수준의 리포터만 지원됩니다.
• resolveSnapshotPath: 루트 수준의 리졸버만 적용됩니다.
• 테스트 러너에 영향을 주지 않는 기타 모든 옵션

TIP

프로젝트 설정 내에서 지원되지 않는 옵션은 "Config" 페이지에서 * 기호로 표시됩니다.

커버리지

워크스페이스 프로젝트에 대한 커버리지는 기본적으로 작동합니다. 그러나 all 옵션을 활성화하고 일부 프로젝트에서 비표준 확장자를 사용하는 경우 루트 구성 파일에 해당 확장자를 처리하는 플러그인이 있어야 합니다.

예를 들어 Vue 파일을 사용하는 패키지가 자체 설정 파일을 가지고 있지만, 일부 파일이 테스트에서 임포트되지 않았다면 커버리지 분석이 실패할 수 있습니다. 이는 커버리지가 프로젝트 설정이 아닌 루트 설정을 기준으로 동작하기 때문에, 사용되지 않은 파일의 사용량을 분석하려고 시도할 때 실패하기 때문입니다.