프론트엔드 테스트 자동화 전략 - 4. 테스트 환경 구성
역량 개발 · 카카오스타일 테크 · 2023.08.04
프론트엔드 개발에서 테스트 자동화 환경을 구축하는 구체적인 방법에 대해 안내해 드립니다. 먼저 JS 테스트 프레임워크와 E2E 테스트 프레임워크의 특성을 비교하여 상황에 맞는 선택 기준을 제시합니다. Jest를 중심으로 Storybook 테스트를 자동화하는 방법, moduleNameMapper와 Babel/SWC를 이용한 빌드 환경 설정, 그리고 jsdom을 활용한 브라우저 모킹 방법까지 상세히 다루고 있습니다. 또한 GitHub Actions의 matrix와 shard 기능을 활용해 CI 환경에서 테스트 실행 속도를 획기적으로 개선하는 방법과 코드 커버리지를 통해 테스트의 완성도를 확인하는 실무적인 팁을 제공합니다.