vitest: workspace

hwisaac·2024년 3월 28일

작업 공간

샘플 프로젝트

Vitest은 워크스페이스 구성 파일을 통해 모노레포를 내장 지원합니다. 프로젝트 설정을 정의하기 위해 워크스페이스를 생성할 수 있습니다.

워크스페이스 정의

워크스페이스는 루트에 vitest.workspace 또는 vitest.projects 파일이 있어야 합니다(구성 파일이 있는 경우 같은 폴더에 있어야 함). Vitest는 이 파일에 ts/js/json 확장자를 지원합니다.

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

vitest.workspace.ts

export default [
  'packages/*'
]

Vitest은 packages의 각 폴더를 별도의 프로젝트로 고려합니다. 구성 파일이 없더라도 해당됩니다.

경고

Vitest은 루트 구성을 워크스페이스 프로젝트로 고려하지 않습니다(include에 지정된 테스트를 실행하지 않음) 이 구성이 명시적으로 지정되지 않은 한.

또한 프로젝트의 구성 파일을 참조할 수 있습니다.

vitest.workspace.ts

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

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

경고

글로브 패턴으로 파일 이름을 참조하는 경우, 구성 파일이 vite.config 또는 vitest.config로 시작하는지 확인하십시오. 그렇지 않으면 Vitest가 건너뛸 것입니다.

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

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config'

// defineWorkspace를 사용하면 유형 힌트를 제공합니다
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',
    }
  }
])

경고

모든 프로젝트는 고유한 이름을 가져야 합니다. 그렇지 않으면 Vitest가 오류를 throw합니다. 인라인 구성 내에서 이름을 제공하지 않으면 Vitest가 번호를 할당합니다. 글로브 구문으로 정의된 프로젝트 구성에서 이름을 제공하지 않으면 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 yarn pnpm bun

npm run 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',
    }
  })
)