기능

• Vite의 설정, 변환기, 해석기 및 플러그인 활용
• 앱에서 사용하는 설정과 동일한 설정으로 테스트 실행
• 테스트를 위한 HMR과 같이 빠르고 스마트한 감시 모드!
• Vue, React, Svelte, Lit 등을 위한 컴포넌트 테스팅 지원
• 즉시 사용 가능한 TypeScript / JSX 지원
• ESM 우선, 최상위 await 지원
• Tinypool을 통한 워커 멀티스레딩 지원
• Tinybench를 사용한 벤치마킹 지원
• 테스트 스위트 및 개별 테스트에 대한 필터링, 타임아웃, 동시 실행 기능 제공
• Workspace 지원
• Jest 호환 스냅샷 지원
• 단언을 위한 Chai 내장, Jest expect 호환 API 제공
• Tinyspy 내장으로 모킹 지원
• DOM 모의를 위해 happy-dom 또는 jsdom 지원
• v8 또는 istanbul을 통한 코드 커버리지 측정
• Rust와 유사한 인-소스 테스팅(In-source testing) 지원
• expect-type을 통한 타입 테스팅 지원

비디오를 통해 첫 번째 테스트 작성 방법 배우기

테스트, 개발 및 빌드 간 설정 공유

Vite의 설정, 변환기, 해석기 및 플러그인을 활용하여 앱에서 사용하는 설정과 동일한 설정으로 테스트를 실행합니다.

자세한 내용은 Vitest 구성에서 확인하십시오.

감시 모드(Watch Mode)

$ vitest

소스 코드 또는 테스트 파일을 수정하면 Vitest는 모듈 그래프를 분석하여 관련된 테스트만 다시 실행합니다. 이는 Vite에서 HMR이 작동하는 방식과 같습니다!

vitest는 개발 환경에서는 기본적으로 감시 모드로, CI 환경(process.env.CI 변수가 설정된 경우)에서는 실행 모드로 자동 실행됩니다. 원하는 모드를 명시적으로 지정하려면 vitest watch 또는 vitest run을 사용하십시오.

즉시 사용 가능한 일반적인 웹 기술 지원

ES Module, TypeScript, JSX, PostCSS 등을 즉시 사용할 수 있습니다.

스레드

Tinypool ( Piscina의 경량 포크)을 통한 워커 멀티스레딩을 통해 테스트를 동시에 실행할 수 있습니다. 스레드는 Vitest에서 기본적으로 활성화되어 있으며, CLI에서 --no-threads를 전달하여 비활성화할 수 있습니다.

Vitest는 또한 각 파일의 환경을 격리하므로, 한 파일의 환경 변수 변경이 다른 파일에 영향을 미치지 않습니다. CLI에 --no-isolate를 전달하여 격리를 비활성화할 수 있습니다 (실행 성능 향상을 위해 정확성을 희생).

테스트 필터링

Vitest는 테스트 범위를 좁혀 테스트 속도를 향상시키는 다양한 방법을 제공하여 개발에 집중할 수 있도록 지원합니다.

자세한 내용은 테스트 필터링을 참조하십시오.

테스트 동시 실행

테스트 내에서 .concurrent를 사용하여 해당 테스트를 병렬로 실행합니다.

import { describe, it } from 'vitest';

// concurrent로 표시된 두 개의 테스트는 병렬로 실행됩니다.
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

테스트 스위트에서 .concurrent를 사용하면 해당 스위트 내의 모든 테스트가 병렬로 실행됩니다.

import { describe, it } from 'vitest';

// 이 스위트 내의 모든 테스트는 병렬로 실행됩니다.
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

.skip, .only 및 .todo를 동시 스위트 및 테스트와 함께 사용할 수도 있습니다. 자세한 내용은 API 참조를 참조하십시오.

WARNING

동시 테스트를 실행할 때 스냅샷 및 단언은 올바른 테스트가 감지되도록 로컬 테스트 컨텍스트에서 expect를 사용해야 합니다.

스냅샷

Jest 호환 스냅샷을 지원합니다.

import { expect, it } from 'vitest';

it('renders correctly', () => {
  const result = render();
  expect(result).toMatchSnapshot();
});

자세한 내용은 스냅샷을 참조하십시오.

Chai 및 Jest expect 호환성

Chai는 단언을 위해 내장되어 있으며, Jest expect 호환 API도 제공합니다.

매처를 추가하는 타사 라이브러리를 사용하는 경우, test.globals를 true로 설정하면 호환성을 높일 수 있습니다.

모킹

Tinyspy는 vi 객체에서 jest 호환 API를 사용하여 모킹을 위해 내장되어 있습니다.

import { expect, vi } from 'vitest';

const fn = vi.fn();

fn('hello', 1);

expect(vi.isMockFunction(fn)).toBe(true);
expect(fn.mock.calls[0]).toEqual(['hello', 1]);

fn.mockImplementation(arg => arg);

fn('world', 2);

expect(fn.mock.results[1].value).toBe('world');

Vitest는 happy-dom 또는 jsdom을 사용하여 DOM 및 브라우저 API 모킹을 지원합니다. Vitest와 함께 제공되지는 않으므로 설치해야 할 수 있습니다.

$ npm i -D happy-dom
# 또는
$ npm i -D jsdom

그런 다음 구성 파일에서 environment 옵션을 변경합니다.

// vite.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'happy-dom', // 또는 'jsdom', 'node'
  },
});

자세한 내용은 모킹을 참조하십시오.

커버리지

Vitest는 v8을 통한 네이티브 코드 커버리지와 istanbul을 통한 계측 기반 코드 커버리지를 지원합니다.

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

자세한 내용은 커버리지를 참조하십시오.

인-소스 테스팅(In-source testing)

Vitest는 Rust의 모듈 테스트와 유사하게 구현과 함께 소스 코드 내에서 테스트를 실행하는 방법도 제공합니다.

이를 통해 테스트는 구현과 동일한 클로저를 공유하며, 비공개 상태를 별도의 export 없이 테스트할 수 있습니다. 또한 개발 과정에서 피드백을 더 빠르게 받을 수 있습니다.

// src/index.ts

// 구현
export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0);
}

// 인-소스 테스트 스위트
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('add', () => {
    expect(add()).toBe(0);
    expect(add(1)).toBe(1);
    expect(add(1, 2, 3)).toBe(6);
  });
}

자세한 내용은 인-소스 테스팅(In-source testing)을 참조하십시오.

벤치마킹 ^experimental

Vitest 0.23.0부터 Tinybench를 통해 bench 함수를 사용하여 벤치마크 테스트를 실행하여 성능 결과를 비교할 수 있습니다.

import { bench, describe } from 'vitest';

describe('sort', () => {
  bench('normal', () => {
    const x = [1, 5, 4, 2, 3];
    x.sort((a, b) => {
      return a - b;
    });
  });

  bench('reverse', () => {
    const x = [1, 5, 4, 2, 3];
    x.reverse().sort((a, b) => {
      return a - b;
    });
  });
});

타입 테스팅 ^experimental

Vitest 0.25.0부터 테스트를 작성하여 타입 퇴행을 감지할 수 있습니다. Vitest는 유사하고 이해하기 쉬운 API를 제공하는 expect-type 패키지를 기본적으로 포함합니다.

import { assertType, expectTypeOf } from 'vitest';
import { mount } from './mount.js';

test('my types work properly', () => {
  expectTypeOf(mount).toBeFunction();
  expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>();

  // @ts-expect-error name is a string
  assertType(mount({ name: 42 }));
});