Jest-TS 설정 복잡도 제거 및 Vitest 4 전환을 통한 테스트 실행 157ms 달성

Context

Jest 기반 TypeScript 프로젝트에서 ts-jest 및 babel-jest 등 다층적인 Transformation Layer 운영으로 인한 설정 복잡도 증가. 설정 옵션 증가에 따른 모호한 에러 메시지 발생과 JSDOM 시뮬레이션의 한계로 실제 브라우저 환경 검증의 어려움 존재.

Technical Solution

• Vite 전용 Transformation Pipeline 통합을 통한 TypeScript 설정 제로화 구현
• globals: true 옵션 적용으로 기존 Jest API(describe, test, expect) 호환성 유지 및 점진적 마이그레이션 경로 확보
• vi.mock()의 Hoisting 메커니즘을 활용한 모듈 모킹 구조 설계
• vi.importActual()의 Async 특성을 반영한 Partial Mocking 구현으로 모듈 export 데이터 정합성 보장
• resolve.alias 설정을 통한 Path Mapping으로 Jest의 moduleNameMapper 의존성 대체
• Browser Mode Stable 버전 도입으로 JSDOM 시뮬레이션을 대체하는 실제 Chromium 기반 DOM 테스트 수행

Impact

• 16개 테스트 케이스 기준 전체 실행 시간 157ms 기록 (Transform 67ms 포함)
• Jest 및 관련 의존성 대비 설치 패키지 수 약 50% 감소

Key Takeaway

프레임워크의 Transformation Pipeline을 테스트 도구와 일치시킴으로써 설정 오버헤드를 제거하고 개발자 경험을 최적화하는 설계 전략의 중요성 확인.