I HATE FLYING BUGS logoFE Chapter

ADR 5: 테스트 도구로 Vitest 사용

현재 프로젝트에서는 테스트 도구로 Jest를 사용하고 있지만, 다음과 같은 문제점들이 있어요:

Status

Accepted

Context

현재 프로젝트에서는 테스트 도구로 Jest를 사용하고 있지만, 다음과 같은 문제점들이 있어요:

  1. 느린 테스트 실행 속도: Jest는 CommonJS 기반으로 동작하여 ES modules을 사용하는 모던 프로젝트에서 변환 과정이 필요해 실행 속도가 느려요.
  2. 복잡한 설정: TypeScript, ES modules, Vite와의 통합을 위해 복잡한 설정이 필요해요.
  3. 실제 환경 테스트 필요: 사용자 환경과 동일한 환경에서의 테스트를 하고 싶어요.

팀에서는 더 빠르고 효율적인 테스트 환경을 원하고 있어요.

Decision

테스트 도구로 Vitest를 채택하기로 결정했어요.

마이그레이션 방법:

// 기존 Jest 방식
// 별도 import 없이 글로벌 함수 사용
describe('test', () => {
  test('should work', () => {
    expect(true).toBe(true);
  });
});

// Vitest 방식
import { describe, test, expect } from 'vitest';
describe('test', () => {
  test('should work', () => {
    expect(true).toBe(true);
  });
});

Consequences

긍정적 영향

  • 뛰어난 성능: Worker threads를 활용한 병렬 실행으로 기존 Jest 대비 최대 10배 빠른 테스트 실행 속도를 제공해요.
  • 설정 간소화: vite.config.js 하나로 모든 환경을 관리하여 중복 설정을 제거하고 유지보수성이 향상돼요.
  • 개발자 경험 향상: Watch 모드가 기본이며 Vite의 HMR처럼 빠른 피드백을 제공해요.
  • 모던 JavaScript 지원: ES modules, Top-level await 등 최신 기능을 별도 설정 없이 자연스럽게 사용할 수 있어요.
  • 브라우저 환경 테스트: 실제 브라우저 환경에서 테스트하여 사용자 환경과 동일한 조건을 제공해요.

부정적 영향

  • 마이그레이션 비용: 기존 Jest 테스트들을 Vitest로 변경하는 작업이 필요해요.

마이그레이션 계획

  1. 새로운 테스트는 Vitest로 작성하기 시작해요.
  2. 기존 테스트는 점진적으로 Vitest 형식으로 변경해요.
  3. 팀 내 Vitest 사용법 공유 세션을 진행해요.

References