소스 내 테스트

Vitest는 Rust의 모듈 테스트와 유사하게, 소스 코드 내에서 테스트를 직접 실행하는 기능을 제공합니다.

이 방식을 사용하면 테스트가 구현 코드와 동일한 클로저를 공유하므로, export되지 않은 private 상태에 대해서도 테스트할 수 있습니다. 또한 개발 과정에서 피드백을 더욱 빠르게 받을 수 있습니다.

설정

소스 파일의 끝에 if (import.meta.vitest) 블록을 추가하고, 그 안에 테스트 코드를 작성하여 시작할 수 있습니다. 다음은 예시입니다.

// 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 설정에서 includeSource 옵션을 수정하여 src/ 디렉터리 아래의 파일을 포함하도록 설정합니다.

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

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

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

$ npx vitest

프로덕션 빌드

프로덕션 빌드 시에는 설정 파일에서 define 옵션을 설정하여 번들러가 사용하지 않는 코드를 제거(tree shaking)하도록 해야 합니다. Vite를 사용하는 경우 다음 예시를 참고하십시오.

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

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

기타 번들러

unbuild

// build.config.ts
import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
+ replace: {
+   'import.meta.vitest': 'undefined',
+ },
  // 기타 옵션
})

자세히 알아보기: unbuild

rollup

// rollup.config.js
+ import replace from '@rollup/plugin-replace'

export default {
  plugins: [
+   replace({
+     'import.meta.vitest': 'undefined',
+   })
  ],
  // 기타 옵션
}

자세히 알아보기: rollup

TypeScript

import.meta.vitest에 대한 TypeScript 지원을 활성화하려면 tsconfig.json 파일에 vitest/importMeta를 추가하십시오.

// tsconfig.json
{
  "compilerOptions": {
    "types": [
+     "vitest/importMeta"
    ]
  }
}

전체 예제는 test/import-meta에서 확인할 수 있습니다.

참고 사항

이 기능은 다음과 같은 경우에 유용합니다.

• 작은 범위의 함수 또는 유틸리티에 대한 단위 테스트
• 프로토타입 제작
• 인라인 단언 (inline assertions)

컴포넌트 테스트나 E2E 테스트와 같이 복잡한 테스트는 별도의 테스트 파일로 분리하여 작성하는 것을 권장합니다.