시작하기

개요

Vitest(발음은 "비테스트")는 Vite 기반의 차세대 테스트 프레임워크입니다.

프로젝트의 배경에 대한 자세한 내용은 Vitest를 선택하는 이유 섹션에서 확인할 수 있습니다.

Vitest 온라인으로 사용해보기

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

프로젝트에 Vitest 추가하기

비디오로 설치 방법 배우기

npm

npm install -D vitest

yarn

yarn add -D vitest

pnpm

pnpm add -D vitest

bun

bun add -D vitest

TIP

Vitest는 Vite v5.0.0 이상 및 Node.js v18.0.0 이상을 필요로 합니다.

위 방법 중 하나를 사용하여 package.json에 vitest를 설치하는 것이 권장됩니다. 그러나 vitest를 직접 실행하려면 npx vitest를 사용할 수 있습니다 (npx 도구는 npm 및 Node.js에 포함되어 있습니다).

npx는 지정한 명령을 실행하는 도구입니다. 기본적으로 npx는 먼저 로컬 프로젝트의 바이너리에서 명령이 존재하는지 확인합니다. 해당 위치에서 찾을 수 없으면 npx는 시스템의 $PATH에서 찾아 실행합니다. 두 위치 모두에서 명령을 찾을 수 없으면 npx는 실행하기 전에 임시 위치에 설치합니다.

테스트 작성

예를 들어, 두 숫자를 더하는 함수의 결과를 검증하는 간단한 테스트를 작성해 보겠습니다.

export function sum(a, b) {
  return a + b;
}

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

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

TIP

기본적으로 테스트 파일 이름에는 반드시 .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

Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  02:15:44
  Duration  311ms

WARNING

Bun을 패키지 관리자로 사용하는 경우, bun test 명령 대신 bun run test 명령을 사용해야 합니다. 그렇지 않으면 Bun 자체의 테스트 러너가 실행됩니다.

Vitest 사용법에 대한 자세한 내용은 API 섹션을 참조하십시오.

Vitest 구성

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

• vitest.config.ts 파일을 생성합니다. 이 파일이 더 높은 우선순위를 가집니다.
• CLI에 --config 옵션을 전달합니다. 예: vitest --config ./path/to/vitest.config.ts
• process.env.VITEST 또는 defineConfig의 mode 속성(별도로 지정하지 않으면 test로 설정됨)을 사용하여 vite.config.ts에서 조건부로 다른 구성을 적용할 수 있습니다.

Vitest는 Vite와 같은 구성 파일 확장자를 지원합니다: .js, .mjs, .cjs, .ts, .cts, .mts. Vitest는 .json 확장자를 지원하지 않습니다.

Vite를 빌드 도구로 사용하지 않는 경우, 구성 파일의 test 속성을 통해 Vitest를 구성할 수 있습니다.

import { defineConfig } from 'vitest/config';

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

TIP

Vite를 사용하지 않더라도 Vitest는 변환 파이프라인에서 Vite에 크게 의존합니다. 따라서 Vite 문서에 설명된 모든 속성을 구성할 수 있습니다.

이미 Vite를 사용하고 있다면 Vite 구성에 test 속성을 추가하십시오. 또한 구성 파일 상단에 삼중 슬래시 디렉티브를 사용하여 Vitest 타입을 참조하도록 추가해야 합니다.

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

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

<reference types="vitest" />는 다음 주요 업데이트에서 더 이상 작동하지 않지만, Vitest 2.1부터 vitest/config로 마이그레이션을 시작할 수 있습니다.

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

export default defineConfig({
  test: {
    // ... 여기에 옵션을 지정합니다.
  },
});

설정 옵션 목록은 설정 참조를 참조하십시오.

WARNING

Vite와 Vitest에 대해 두 개의 별도 구성 파일을 사용하기로 결정했다면, Vitest 구성 파일에 동일한 Vite 옵션을 정의해야 합니다. Vitest 설정 파일이 Vite 파일을 덮어쓰기 때문입니다. 또한 vite 또는 vitest/config 항목의 mergeConfig 메서드를 사용하여 Vite 구성을 Vitest 구성과 병합할 수 있습니다.

vitest.config.mjs

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

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

vite.config.mjs

import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [Vue()],
});

그러나 두 개의 별도 파일을 생성하는 대신 Vite와 Vitest에 동일한 파일을 사용하는 것을 권장합니다.

프로젝트 지원

테스트 프로젝트를 사용하여 동일한 프로젝트 내에서 다른 프로젝트 구성을 실행할 수 있습니다. vitest.config 파일에서 프로젝트를 정의하는 파일 및 폴더 목록을 정의할 수 있습니다.

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    projects: [
      // 프로젝트를 정의하기 위해 와일드카드 패턴 목록을 사용할 수 있습니다.
      // 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로 직접 실행할 수 있습니다. 다음은 기본 생성된 Vitest 프로젝트의 기본 npm 스크립트입니다.

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

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

명령줄 인터페이스에 대해 자세히 알아보십시오.

자동 종속성 설치

Vitest는 특정 종속성이 아직 설치되지 않은 경우 설치하라는 메시지를 표시합니다. VITEST_SKIP_INSTALL_CHECKS=1 환경 변수를 설정하여 이 동작을 비활성화할 수 있습니다.

IDE 통합

Vitest를 사용한 테스트 경험을 향상시키기 위해 Visual Studio Code용 공식 확장도 제공했습니다.

VS Code Marketplace에서 설치

IDE 통합에 대해 자세히 알아보십시오.

예시

예시	소스	플레이그라운드
basic	GitHub	온라인 플레이
fastify	GitHub	온라인 플레이
in-source-test	GitHub	온라인 플레이
lit	GitHub	온라인 플레이
vue	GitHub	온라인 플레이
marko	GitHub	온라인 플레이
preact	GitHub	온라인 플레이
react	GitHub	온라인 플레이
solid	GitHub	온라인 플레이
svelte	GitHub	온라인 플레이
sveltekit	GitHub	온라인 플레이
profiling	GitHub	사용 불가
typecheck	GitHub	온라인 플레이
projects	GitHub	온라인 플레이

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

미출시 커밋 사용

메인 브랜치의 각 커밋과 cr-tracked 레이블이 있는 PR은 pkg.pr.new에 게시됩니다. npm i https://pkg.pr.new/vitest@{commit} 명령으로 설치할 수 있습니다.

직접 수정한 내용을 로컬에서 테스트하려면 직접 빌드하고 연결할 수 있습니다(pnpm이 필요합니다):

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를 전역으로 연결하는 데 사용한 패키지 관리자를 사용합니다).

커뮤니티

궁금한 점이 있거나 도움이 필요하면 Discord 및 GitHub Discussions를 통해 커뮤니티에 문의하십시오.