모킹 framer-motion v9 테스트 전략

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

• React + framer-motion 애니메이션 개발자
• Jest 기반의 테스트 작성자
• UI 성능 최적화 담당자
• 난이도: 중급 (Jest/React 기초 지식 필요)

핵심 요약

• 모든 애니메이션 컴포넌트를 0초 전환으로 렌더링 (motion 컴포넌트의 duration 속성 강제 설정)
• AnimatePresence 라이프사이클 유지 (exit/enter 이벤트 자연스럽게 처리)
• 테스트별 duration 오버라이드 지원 (MotionConfig를 통해 transition.duration 설정)
• Jest 모듈 시스템 및 React Context API와 호환성 유지

섹션별 세부 요약

1. 즉시 실행되는 애니메이션

• framer-motion의 모든 motion 컴포넌트에 0초 전환 적용
• deepReplaceDurations 함수로 duration 속성 재귀적으로 0으로 강제 설정
• jest.setup.js 파일에서 framer-motion 모듈을 가상으로 대체

2. `AnimatePresence` 유지

• AnimatePresence의 exit/enter 라이프사이클을 테스트 시 자연스럽게 사용 가능
• motion 컴포넌트의 key 속성 변경 시 이벤트 처리 동작 그대로 유지

3. `MotionConfig` 기반의 `duration` 오버라이드

• MotionConfig를 통해 transition.duration 값을 설정하여 애니메이션 시간 조절 가능
• undefined 값 전달 시 원본 props 유지 (비제로 지속 시간 테스트 가능)

4. `Proxy` 기반의 `motion` 컴포넌트 감시

• framer-motion의 motion 객체를 Proxy로 감싸 새로운 컴포넌트 추가 시 자동 감싸기
• componentCache로 컴포넌트 래퍼 재사용 (성능 최적화)

5. 비동기 라이프사이클 처리

• requestAnimationFrame 사용으로 애니메이션 이벤트는 다음 프레임 틱에서 처리
• waitFor(...) 사용 시 Jest 타이머와 연동하여 비동기 처리 가능

결론

• jest.setup.js 파일을 생성하여 framer-motion 모듈 대체
• MotionConfig를 사용해 transition.duration을 테스트별로 조절
• Proxy와 componentCache 활용으로 framer-motion 업데이트 시 유지보수 최소화
• AnimatePresence 라이프사이클 유지로 UI 테스트의 안정성과 신뢰성 향상