워크스페이스

샘플 프로젝트

GitHub - 온라인에서 실행

Vitest는 단일 Vitest 프로세스 내에서 여러 프로젝트 구성을 정의할 수 있도록 지원합니다. 이 기능은 모노레포 환경에서 특히 유용하며, resolve.alias, plugins, test.browser 등 다양한 구성으로 테스트를 실행하는 데도 활용될 수 있습니다.

워크스페이스 정의

워크스페이스를 정의하려면 루트 디렉터리(루트 구성 파일과 동일한 폴더 또는 루트 구성 파일이 없는 경우 작업 디렉터리)에 vitest.workspace 또는 vitest.projects 파일을 포함해야 합니다. Vitest는 이 파일에 대해 ts, js, json 확장자를 지원합니다.

명명 규칙

이 기능의 이름은 workspaces가 아닌 workspace임을 유의하십시오(끝에 "s"가 붙지 않습니다).

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

vitest.workspace.ts

export default ['packages/*'];

Vitest는 packages 내의 모든 폴더를 구성 파일이 없어도 별도의 프로젝트로 취급합니다. Vitest 2.1부터 이 glob 패턴이 파일과 일치하면 이름에 vitest가 없더라도 Vitest 구성으로 간주됩니다.

WARNING

Vitest는 루트 vitest.config 파일을 워크스페이스 구성에 명시적으로 지정하지 않으면 워크스페이스 프로젝트로 취급하지 않습니다. 결과적으로 루트 구성은 reporters 및 coverage와 같은 전역 옵션에만 영향을 줍니다.

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

vitest.workspace.ts

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

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

인라인 구성을 사용하여 프로젝트를 정의할 수도 있습니다. 워크스페이스 파일은 두 구문을 동시에 지원합니다.

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config';

// defineWorkspace는 훌륭한 타입 힌팅 개발자 경험(DX)을 제공합니다.
export default defineWorkspace([
  // `packages` 폴더 내의 모든 폴더 및 파일에 일치합니다.
  '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는 가장 가까운 package.json 파일의 "name" 속성을 기본값으로 사용하거나, 존재하지 않는 경우 폴더 이름을 사용합니다.

인라인 구성을 사용하지 않는 경우 루트 디렉터리에 간단한 JSON 파일을 만들 수 있습니다.

vitest.workspace.json

["packages/*"]

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

packages/a/vitest.config.ts

// @errors: 2769
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

npm run test --project e2e

yarn

yarn test --project e2e

pnpm

pnpm run test --project e2e

bun

bun test --project e2e

TIP

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

npm

npm run test --project e2e --project unit

yarn

yarn test --project e2e --project unit

pnpm

pnpm run test --project e2e --project unit

bun

bun 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',
    },
  })
);

defineWorkspace 수준에서 extends 옵션을 사용하여 루트 수준 구성에서 상속할 수 있습니다. 모든 옵션이 병합됩니다.

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  {
    extends: './vitest.config.ts',
    test: {
      name: 'unit',
      include: ['**/*.unit.test.ts'],
    },
  },
  {
    extends: './vitest.config.ts',
    test: {
      name: 'integration',
      include: ['**/*.integration.test.ts'],
    },
  },
]);

일부 구성 옵션은 프로젝트 구성에서 허용되지 않습니다. 가장 주목할 만한 것은 다음과 같습니다.

• coverage: 전체 워크스페이스에 대해 커버리지 정보가 수집됩니다.
• reporters: 루트 수준 리포터(reporter)만 지원됩니다.
• resolveSnapshotPath: 루트 수준 리졸버만 적용됩니다.
• 테스트 실행기에 영향을 미치지 않는 다른 모든 옵션

TIP

프로젝트 구성 내에서 지원되지 않는 모든 구성 옵션은 "Config" 가이드에서 * 기호로 표시되어 있습니다.