Storybook MSW mock 구조 개선으로 UI 테스트 효율 UP!
by DD
2년 전
조회수 6
Storybook에서 MSW를 사용하여 UI 테스트 및 문서화를 진행했으나, mock 중복 문제 발생
recast를 활용한 변환 스크립트를 통해 MSW mock을 중앙 집중 관리하는 새로운 구조 제안
API mock 중앙화로 코드 중복 감소, 유지보수성 및 재사용성 향상
MSW Mock 중앙화 아키텍처 설계
기존 Storybook 내 개별 MSW mock 정의 방식은 코드 중복과 관리 어려움을 야기했다. 따라서, 모든 API mock을 한 곳에서 관리하는 구조를 도입했다. 구체적으로, fixtures와 mocks 파일을 분리하여, 정적 데이터는 fixtures에, 동적 로직은 mocks에서 관리하도록 설계했다.
AST 기반 코드 변환 스크립트 구현
자동화된 마이그레이션을 위해 recast를 활용한 AST(Abstract Syntax Tree) 기반 코드 변환 스크립트를 개발했다. AST를 통해 Storybook 스토리 파일에서 MSW mock을 추출하고, GraphQL 쿼리에 매핑하는 작업을 수행했다. 따라서, 수동 작업 시간을 대폭 단축하고, 마이그레이션 오류를 최소화했다.
API Mock 중앙화의 장점 및 고려사항
API mock 중앙화는 코드 중복을 줄이고, 유지보수성을 향상시킨다. API 변경 시, 관련된 모든 스토리 파일을 수정할 필요가 없어진다. 반면, 프로젝트 외부에서 컴포넌트 사용 시, mock 관리 가이드라인 및 API mock 오버라이드에 대한 고려가 필요하다.
