시작하기

개요

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 >=v18.0.0을 필요로 합니다.

위에 나열된 방법 중 하나를 사용하여 package.json에 vitest를 설치하는 것을 권장합니다. 하지만 vitest를 직접 실행하려면 npx vitest를 사용할 수 있습니다 (npx 도구는 npm 및 Node.js와 함께 제공됩니다).

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

테스트 작성하기

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

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

// sum.test.js
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
• defineConfig에서 process.env.VITEST 또는 mode 속성을 사용하여 (test로 재정의되지 않으면 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 3에서 작동하지 않지만, 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 워크스페이스를 사용하여 동일한 프로젝트 내에서 다른 프로젝트 구성을 실행합니다. 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로 직접 실행할 수 있습니다. 다음은 새로 생성된 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	온라인 플레이
workspace	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에서 커뮤니티에 문의하세요.