기능

• Vite의 설정, 변환기, 리졸버 및 플러그인.

• 테스트를 실행하는 데 앱에서 동일한 설정을 사용하세요!

• 스마트하고 즉시 반응하는 감시 모드, 마치 테스트용 HMR처럼!

• Vue, React, Svelte, Lit, Marko 등을 위한 컴포넌트 테스트

• Out-of-the-box TypeScript / JSX 지원

• ESM 우선, 최상위 대기

• Tinypool을 통한 워커 멀티 스레딩

• Tinybench를 통한 벤치마킹 지원

• 스위트 및 테스트에 대한 필터링, 타임아웃, 병렬 실행

• 워크스페이스 지원

• Jest 호환 스냅샷

• 단언을 위한 내장 Chai + Jest expect 호환 API

• 모킹을 위한 내장 Tinyspy

• DOM 모킹을 위한 happy-dom 또는 jsdom

• v8 또는 istanbul을 통한 코드 커버리지

• Rust와 유사한 소스 내 테스팅

• expect-type을 통한 타입 테스팅

비디오로 첫 번째 테스트를 작성하는 방법 배우기

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

Vite의 설정, 변환기, 리졸버 및 플러그인. 앱에서 동일한 설정을 사용하여 테스트를 실행하세요.

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

감시 모드​

$ vitest

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

vitest는 개발 환경에서 기본적으로 감시 모드로 시작되며 CI 환경(when process.env.CI가 존재할 때)에서는 실행 모드로 지능적으로 전환됩니다. 원하는 모드를 명시적으로 지정하려면 vitest watch 또는 vitest run을 사용하세요.

기본 웹 이디엄 Out-Of-The-Box​

Out-of-the-box ES Module / TypeScript / JSX 지원 / PostCSS

스레드​

기본적으로 Vitest는 Tinypool(Piscina의 가벼운 포크)를 통해 node:worker_threads를 사용하여 여러 스레드에서 테스트 파일을 실행하여 테스트를 동시에 실행할 수 있습니다. 테스트가 멀티 스레딩과 호환되지 않는 코드를 실행하는 경우, --pool=forks를 사용하여 Tinypool을 통해 node:child_process에서 여러 프로세스로 테스트를 실행할 수 있습니다.

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

Vitest는 또한 각 파일의 환경을 격리하여 한 파일에서의 환경 변화가 다른 파일에 영향을 미치지 않도록 합니다. 환경을 비활성화하려면 CLI에 --no-isolate를 전달하세요 (실행 성능을 위해 정확성을 포기함).

테스트 필터링​

Vitest는 개발에 집중할 수 있도록 테스트를 좁히는 다양한 방법을 제공합니다.

Test Filtering에 대해 더 알아보세요.

테스트를 병렬로 실행하기​

.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 참조를 참조하세요.

경고

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

스냅샷​

Jest 호환 스냅샷 지원.

import { expect, it } from 'vitest'

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

자세한 내용은 Snapshot에서 확인하세요.

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는 DOM 및 브라우저 API를 모킹하기 위해 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'
  },
})

자세한 내용은 모킹에서 확인하세요.

커버리지​

Vitest는 v8를 통한 네이티브 코드 커버리지와 istanbul을 통한 인스트루먼트된 코드 커버리지를 지원합니다.

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

자세한 내용은 Coverage에서 확인하세요.

소스 내 테스팅​

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

이를 통해 테스트는 구현과 동일한 클로저를 공유하며 내보내기 없이 비공개 상태를 테스트할 수 있습니다. 동시에 개발을 위한 피드백 루프를 더 가깝게 가져옵니다.

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

자세한 내용은 소스 내 테스팅에서 확인하세요.

벤치마킹 실험적​

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

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