vitest 시작하기

개요

Vitest는 Vite 기반의 차세대 테스팅 프레임워크입니다.

프로젝트의 이유에 대한 논리를 자세히 알고 싶다면 Vitest의 이유 섹션을 확인해주세요.

온라인에서 Vitest 사용해보기

StackBlitz에서 Vitest를 온라인으로 시도해볼 수 있습니다. 브라우저에서 Vitest를 직접 실행하며 로컬 설정과 거의 동일하지만 컴퓨터에 별도로 설치할 필요가 없습니다.

프로젝트에 Vitest 추가하기

비디오로 설치 방법 배우기

npm 또는 yarn 또는 pnpm을 사용하여 다음과 같이 설치할 수 있습니다.

npm install -D vitest

팁: Vitest 1.0은 Vite >=v5.0.0 및 Node >=v18.00이 필요합니다.

일반적으로 package.json에 vitest의 복사본을 설치하는 것이 좋습니다. 그러나 vitest를 직접 실행하고 싶다면 npx vitest를 사용할 수도 있습니다(npx 명령은 npm과 Node.js와 함께 제공됩니다).

npx 명령은 명령을 실행할 것이며 필요한 패키지를 실행하기 위해 로컬 node_modules/.bin에 있는지 확인합니다. 기본적으로 npx는 명령이 $PATH 또는 로컬 프로젝트 이진 파일에 있는지 확인하고 해당 명령을 실행합니다. 명령을 찾을 수 없으면 실행 전에 설치됩니다.

테스트 작성하기

예를 들어, 두 숫자를 더하는 함수의 출력을 확인하는 간단한 테스트를 작성해보겠습니다.

// sum.js
export function sum(a, b) {
  return a + b
}

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

팁: 기본적으로 테스트 파일 이름에 ".test." 또는 ".spec."이 포함되어야 합니다.

다음으로, 테스트를 실행하려면 다음 섹션을 package.json에 추가하십시오.

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

마지막으로, 패키지 관리자에 따라 npm run test, yarn test, 또는 pnpm test를 실행하면 Vitest가 다음과 같은 메시지를 출력합니다.

✓ sum.test.js (1)
  ✓ adds 1 + 2 to equal 3

테스트 파일  1 통과 (1)
    테스트  1 통과 (1)
  시작 시간  02:15:44
  소요 시간  311ms (변환 23ms, 설정 0ms, 수집 16ms, 테스트 2ms, 환경 0ms, 준비 106ms)

Vitest의 사용 방법에 대해 더 알아보려면 API 섹션을 참조하십시오.

Vitest 구성하기

Vitest의 주요 장점 중 하나는 Vite와의 통합 구성입니다. vitest가 있다면, vitest는 루트 vite.config.ts를 읽어 Vite 앱과 동일한 플러그인 및 설정과 일치하도록 합니다. 예를 들어, Vite의 resolve.alias와 plugins 구성은 기본적으로 작동합니다. 테스트 중에 다른 구성을 사용하려면 다음을 수행할 수 있습니다.

• 우선 순위가 더 높은 vitest.config.ts를 생성합니다.
• CLI에 --config 옵션을 전달합니다. 예: vitest --config ./path/to/vitest.config.ts
• vite.config.ts에서 조건부로 다른 구성을 적용하기 위해 process.env.VITEST 또는 defineConfig의 mode 속성을 사용합니다(재정의되지 않은 경우 test로 설정됨).

Vitest는 Vite가 사용하는 것과 동일한 확장을 지원합니다: .js, .mjs, .cjs, .ts, .cts, .mts. Vitest는 .json 확장을 지원하지 않습니다.

만약 Vite를 빌드 도구로 사용하지 않는다면, 구성 파일에서 test 속성을 사용하여 Vitest를 구성할 수 있습니다.

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    // ...
  },
})

팁: Vitest는 변환 파이프라인을 위해 Vite에 크게 의존하므로, Vite 문서에 설명된 속성을 구성할 수도 있습니다.

이미 Vite를 사용 중이라면 Vite 구성에 test 속성을 추가하세요. 또한 구성 파일의 상단에 삼중 슬래시 지시문을 사용하여 Vitest 타입에 대한 참조를 추가해야 합니다.

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...


  },
})

구성 참조에서 구성 옵션 목록을 확인하세요.

경고: Vite 및 Vitest에 대해 두 개의 별도의 구성 파일을 사용하기로 결정한 경우, Vitest 구성 파일이 Vite 파일을 재정의하므로 Vitest 구성 파일에서 동일한 Vite 옵션을 정의해야 합니다. Vite 구성과 Vitest 구성을 병합하기 위해 vite 또는 vitest/config 항목의 mergeConfig 메서드를 사용할 수도 있습니다.

import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config.mjs'

export default mergeConfig(viteConfig, defineConfig({
  test: {
    // ...
  }
}))

하지만 두 개의 별도의 파일 대신 Vite 및 Vitest에 동일한 파일을 사용하는 것이 좋습니다.

Workspaces 지원

Vitest Workspaces를 사용하여 동일한 프로젝트 내에서 다양한 프로젝트 구성을 실행할 수 있습니다. vitest.workspace 파일에 워크스페이스를 정의하는 파일 및 폴더 목록을 정의할 수 있습니다. 이 파일은 js/ts/json 확장을 지원합니다. 이 기능은 모노레포 설정과 잘 작동합니다.

import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  // 워크스페이스를 정의하기 위해 glob 패턴 목록을 사용할 수 있습니다.
  // Vitest는 구성 파일이나 구성 파일이 있는 디렉터리 목록의 목록을 예상합니다.
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // 동일한 "vitest" 프로세스에서 동일한 테스트를 실행할 수 있지만,
  // 다른 구성으로 실행할 수 있습니다.
  {
    test: {
      name: 'happy-dom',
      root: './shared_tests',
      environment: 'happy-dom',
      setupFiles: ['./setup.happy-dom.ts'],
    },
  },
  {
    test: {
      name: 'node',
      root: './shared_tests',
      environment: 'node',
      setupFiles: ['./setup.node.ts'],
    },
  },
])

명령 줄 인터페이스

Vitest가 설치된 프로젝트에서는 npm 스크립트에서 vitest 이진 파일을 사용하거나 직접 npx vitest를 실행할 수 있습니다. 다음은 scaffolding된 Vitest 프로젝트의 기본 npm 스크립트입니다.

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

한 번의 테스트만 실행하고 파일 변경을 감시하지 않으려면 vitest run을 사용합니다. --port 또는 --https와 같은 추가 CLI 옵션을 지정할 수 있습니다. CLI 옵션의 전체 목록은 프로젝트에서 npx vitest --help를 실행하여 확인할 수 있습니다.

Vitest Command Line Interface에 대해 자세히 알아보세요.

IDE 통합

Vitest의 테스트 경험을 향상시키기 위해 Visual Studio Code용 공식 확장도 제공됩니다.

VS Code Marketplace에서 설치

IDE 통합에 대해 자세히 알아보세요.

예시

예시	소스	플레이그라운드
basic	GitHub	온라인에서 실행
fastify	GitHub	온라인에서 실행
graphql	GitHub	온라인에서 실행
image-snapshot	GitHub	온라인에서 실행
lit	GitHub	온라인에서 실행
marko	GitHub	온라인에서 실행
mocks	GitHub	온라인에서 실행
nextjs	GitHub	온라인에서 실행
playwright	GitHub
preact-testing-lib	GitHub	온라인에서 실행
react-mui	GitHub	온라인에서 실행
react-storybook	GitHub	온라인에서 실행
react-testing-lib-msw	GitHub	온라인에서 실행
react-testing-lib	GitHub	온라인에서 실행
react	GitHub	온라인에서 실행
ruby	GitHub	온라인에서 실행
solid	GitHub	온라인에서 실행
svelte	GitHub	온라인에서 실행
sveltekit	GitHub	온라인에서 실행
typecheck	GitHub	온라인에서 실행
vitesse	GitHub	온라인에서 실행
vue-jsx	GitHub	온라인에서 실행
vue	GitHub	온라인에서 실행
workspace	GitHub	[온라인에서 실행](https://stackblitz.com/fork/github

/vitest-dev/vitest/tree/main/examples/workspace?initialPath=vitest/) |

Vitest를 사용하는 프로젝트

• unocss
• unplugin-auto-import
• unplugin-vue-components
• vue
• vite
• vitesse
• vitesse-lite
• fluent-vue
• vueuse
• milkdown
• gridjs-svelte
• spring-easing
• bytemd
• faker
• million
• Vitamin
• neodrag
• svelte-multiselect
• iconify
• tdesign-vue-next
• cz-git

릴리스되지 않은 커밋 사용하기

최신 기능을 테스트하기 위해 새 릴리스를 기다릴 수 없는 경우, 로컬 머신에 vitest 리포지토리를 클론한 다음 직접 빌드하고 연결해야 합니다 (pnpm 필요):

bash

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # 원하는 패키지 매니저를 사용할 수 있습니다

그런 다음 Vitest를 사용하는 프로젝트로 이동하여 pnpm link --global vitest (또는 전역으로 vitest를 링크하는 사용한 패키지 매니저)를 실행하세요.