기능

• Vite의 구성, 변환기, 리졸버 및 플러그인 지원
• 앱에서 사용하는 동일한 설정으로 테스트 실행
• HMR과 유사한 스마트하고 즉각적인 watch 모드 제공
• Vue, React, Svelte, Lit, Marko 등을 위한 컴포넌트 테스트 지원
• TypeScript / JSX 기본 지원
• ESM 우선 지원, 최상위 await 지원
• Tinypool을 통한 워커 멀티스레딩 지원
• Tinybench를 통한 벤치마킹 지원
• 테스트 그룹 및 개별 테스트에 대한 필터링, 타임아웃, 동시성 기능 제공
• 작업 공간 지원
• Jest 호환 스냅샷 지원
• 단언문을 위한 Chai 내장 및 Jest expect 호환 API 제공
• 모의(mocking)를 위한 Tinyspy 내장
• DOM 모의(mocking)를 위한 happy-dom 또는 jsdom 지원
• 브라우저에서 컴포넌트 테스트를 실행하기 위한 브라우저 모드 지원
• v8 또는 istanbul을 통한 코드 커버리지 지원
• Rust와 유사한 인소스 테스트 지원
• expect-type을 통한 타입 테스트 지원
• 샤딩 지원

영상을 통해 첫 테스트 작성 방법 배우기

테스트, 개발 및 빌드 간 공유 구성

Vite의 구성, 변환기, 리졸버 및 플러그인을 활용하여 앱에서 사용하는 동일한 설정으로 테스트를 실행할 수 있습니다.

자세한 내용은 Vitest 구성에서 확인하세요.

Watch 모드

$ vitest

소스 코드나 테스트 파일을 수정하면 Vitest는 모듈 그래프를 지능적으로 검색하여 관련 테스트만 다시 실행합니다. 이는 Vite에서 HMR이 작동하는 방식과 유사합니다!

vitest는 개발 환경에서 기본적으로 watch mode로 시작하며, CI 환경(process.env.CI가 존재할 때)에서는 run mode로 자동으로 시작합니다. vitest watch 또는 vitest run을 사용하여 원하는 모드를 명시적으로 지정할 수 있습니다.

--standalone 플래그를 사용하여 Vitest를 시작하면 백그라운드에서 계속 실행됩니다. 이 모드에서는 변경 사항이 발생하기 전까지는 어떤 테스트도 실행하지 않습니다. 소스 코드가 변경되더라도 해당 소스를 가져오는 테스트가 실행되기 전까지는 Vitest가 테스트를 실행하지 않습니다.

일반적인 웹 관용구 기본 제공

ES 모듈, TypeScript, JSX, PostCSS 등을 기본으로 지원합니다.

스레드

기본적으로 Vitest는 Tinypool (Piscina의 경량 포크)을 통해 node:child_process를 사용하여 여러 프로세스에서 테스트 파일을 실행함으로써 테스트를 동시에 실행할 수 있도록 합니다. 테스트 그룹의 속도를 더욱 높이려면 node:worker_threads를 사용하여 테스트를 실행하도록 --pool=threads를 활성화하는 것을 고려하십시오 (일부 패키지는 이 설정에서 작동하지 않을 수 있습니다).

단일 스레드 또는 프로세스에서 테스트를 실행하려면 poolOptions를 참조하십시오.

Vitest는 또한 각 파일의 환경을 분리하여 한 파일의 환경 설정 변경이 다른 파일에 영향을 미치지 않도록 합니다. 이 분리 기능은 CLI에 --no-isolate를 전달하여 비활성화할 수 있습니다 (정확성을 희생하여 실행 성능을 높일 수 있습니다).

테스트 필터링

Vitest는 테스트 속도를 높이고 개발에 집중할 수 있도록 실행할 테스트를 좁히는 여러 가지 방법을 제공합니다.

테스트 필터링에 대해 자세히 알아보세요.

테스트 동시 실행

연속된 테스트에서 .concurrent를 사용하여 병렬로 실행합니다.

import { describe, it } from 'vitest';

// The two tests marked with concurrent will be started in parallel
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';

// All tests within this suite will be started in parallel
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와 함께 단언문을 위해 내장되어 있습니다.

매처(matcher)를 추가하는 서드 파티 라이브러리를 사용할 때, test.globals를 true로 설정하면 호환성이 향상됩니다.

모의(mocking)

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

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: string) => arg);

fn('world', 2);

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

Vitest는 DOM 및 브라우저 API 모의(mocking)를 위해 happy-dom 또는 jsdom을 모두 지원합니다. 이 라이브러리들은 Vitest에 포함되어 있지 않으므로 별도로 설치해야 합니다.

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

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

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

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

모의(mocking)에서 자세히 알아보세요.

커버리지

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

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

커버리지에서 자세히 알아보세요.

인소스 테스트

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

이를 통해 테스트는 구현과 동일한 클로저를 공유하고 외부로 노출하지 않고도 비공개 상태를 테스트할 수 있습니다. 동시에 개발 피드백 주기를 단축시킵니다.

// src/index.ts

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

// in-source test suites
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);
  });
}

인소스 테스트에서 자세히 알아보세요.

벤치마킹 실험적

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;
    });
  });
});

타입 테스트 실험적

타입 퇴행을 포착하기 위해 테스트를 작성할 수 있습니다. Vitest는 유사하고 이해하기 쉬운 API를 제공하는 expect-type 패키지를 포함합니다.

import { assertType, expectTypeOf, test } 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 }));
});

샤딩

--shard 및 --reporter=blob 플래그를 사용하여 다른 머신에서 테스트를 실행합니다. 모든 테스트 및 커버리지 결과는 --merge-reports 명령을 사용하여 CI 파이프라인 마지막 단계에서 병합할 수 있습니다.

vitest --shard=1/2 --reporter=blob
vitest --shard=2/2 --reporter=blob
vitest --merge-reports --reporter=junit --coverage.reporter=text

자세한 내용은 성능 향상 | 샤딩을 참조하십시오.

환경 변수

Vitest는 프런트엔드 관련 테스트와의 호환성을 유지하기 위해 .env 파일에서 VITE_ 접두사가 붙은 환경 변수만 자동으로 로드하며, Vite의 기존 규칙을 따릅니다. .env 파일에서 모든 환경 변수를 불러오려면 vite에서 가져온 loadEnv 메서드를 사용할 수 있습니다.

import { loadEnv } from 'vite';
import { defineConfig } from 'vitest/config';

export default defineConfig(({ mode }) => ({
  test: {
    // mode defines what ".env.{mode}" file to choose if exists
    env: loadEnv(mode, process.cwd(), ''),
  },
}));