시작하기

개요

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 1.0 는 Vite 버전 5.0.0 이상 및 Node.js 버전 18.0.0 이상이 필요합니다.

위 방법 중 하나를 사용하여 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);
});

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

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).
• 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: {
    // ...
  },
});

TIP

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

이미 Vite를 사용하고 있다면 Vite 설정에 test 속성을 추가하세요. 또한 구성 파일 상단에 세 개의 슬래시 지시문을 사용하여 Vitest 유형에 대한 참조를 추가해야 합니다.

/// <reference types="vitest" />
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에 동일한 파일을 사용하는 것이 좋습니다.

Workspaces 지원

Vitest Workspaces를 사용하여 동일한 프로젝트 내에서 여러 프로젝트 구성을 실행할 수 있습니다. vitest.workspace 파일에서 작업 공간을 정의하는 파일 및 폴더 목록을 정의할 수 있습니다. 이 파일은 js/ts/json 확장명을 지원합니다. 이 기능은 모노레포 환경에서 유용합니다.

import { defineWorkspace } from 'vitest/config';

export default defineWorkspace([
  // you can use a list of glob patterns to define your workspaces
  // Vitest expects a list of config files
  // or directories where there is a config file
  'packages/*',
  'tests/*/vitest.config.{e2e,unit}.ts',
  // you can even run the same tests,
  // but with different configs in the same "vitest" process
  {
    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'],
    },
  },
]);

명령줄 인터페이스 (Command Line Interface)

Vitest가 설치된 프로젝트에서는 npm 스크립트에서 vitest 바이너리를 사용하거나 npx vitest로 직접 실행할 수 있습니다. 다음은 Vitest 프로젝트를 스캐폴딩할 때 생성되는 기본 npm 스크립트입니다.

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

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

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

IDE 통합

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

VS Code Marketplace에서 설치

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

예제

예제	소스	플레이그라운드
basic	GitHub	Play Online
fastify	GitHub	Play Online
lit	GitHub	Play Online
marko	GitHub	Play Online
preact	GitHub	Play Online
react	GitHub	Play Online
solid	GitHub	Play Online
sveltekit	GitHub	Play Online
typecheck	GitHub	Play Online
workspace	GitHub	Play Online

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 repo를 로컬 시스템에 복제한 다음 직접 빌드하고 연결해야 합니다 (pnpm 필요).

git clone https://github.com/vitest-dev/vitest.git
cd vitest
pnpm install
cd packages/vitest
pnpm run build
pnpm link --global # you can use your preferred package manager for this step

그런 다음 Vitest를 사용하는 프로젝트로 이동하여 pnpm link --global vitest를 실행합니다 (또는 vitest를 전역적으로 연결하는 데 사용한 패키지 관리자).

커뮤니티

질문이 있거나 도움이 필요하면 Discord 및 GitHub Discussions에서 커뮤니티에 문의하십시오.