소스 내 테스팅

Vitest는 구현 코드와 함께 소스 코드 내에서 직접 테스트를 실행하는 방식을 제공하며, 이는 Rust의 모듈 테스트와 유사합니다.

이 방식은 테스트가 구현 코드와 동일한 클로저를 공유하게 하여, 별도로 내보내지 않은 비공개 상태의 코드도 테스트할 수 있게 합니다. 또한 개발 피드백 주기를 단축시키는 이점이 있습니다.

WARNING

이 가이드는 소스 코드 내에 테스트를 작성하는 방법을 설명합니다. 별도의 테스트 파일에 테스트를 작성해야 하는 경우, "테스트 작성" 가이드를 따르십시오.

설정

시작하려면 소스 파일 끝에 if (import.meta.vitest) 블록을 추가하고 그 안에 테스트를 작성하십시오. 예를 들면 다음과 같습니다:

// the implementation
export function add(...args: 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);
  });
}

Vitest가 src/ 아래의 파일을 포함하도록 includeSource 구성을 업데이트하십시오:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    includeSource: ['src/**/*.{js,ts}'], 
  },
});

이제 테스트를 실행할 수 있습니다.

$ npx vitest

프로덕션 빌드

프로덕션 빌드를 위해서는 번들러가 사용하지 않는 코드 제거(Tree Shaking)를 수행할 수 있도록 설정 파일에 define 옵션을 설정해야 합니다. 예를 들어, Vite에서 다음과 같이 설정합니다:

/// <reference types="vitest/config" />

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    includeSource: ['src/**/*.{js,ts}'],
  },
  define: { 
    'import.meta.vitest': 'undefined', 
  }, 
})

다른 번들러

unbuild

import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  replace: { 
    'import.meta.vitest': 'undefined', 
  }, 
  // other options
})

자세히 알아보려면: unbuild

Rollup

import replace from '@rollup/plugin-replace'

export default {
  plugins: [
    replace({ 
      'import.meta.vitest': 'undefined', 
    }) 
  ],
  // other options
}

자세히 알아보려면: Rollup

TypeScript

import.meta.vitest에 대한 TypeScript 지원을 받으려면 tsconfig.json에 vitest/importMeta를 추가하십시오:

{
  "compilerOptions": {
    "types": [
      "vitest/importMeta"
    ]
  }
}

전체 예제는 examples/in-source-test에서 확인할 수 있습니다.

참고 사항

이 기능은 다음 경우에 유용할 수 있습니다:

• 작은 범위의 함수 또는 유틸리티에 대한 단위 테스트
• 프로토타입 개발
• 인라인 어서션

컴포넌트 또는 E2E 테스트와 같은 더 복잡한 테스트의 경우, 별도의 테스트 파일을 사용하는 것을 권장합니다.