프론트엔드 테스트 자동화, Jest와 GitHub Actions로 CI/CD 구축!
테스트 자동화를 위한 Jest 환경 구성 및 GitHub Actions 연동 방법을 제시함
Storybook/test-runner와 Jest의 장단점을 비교 분석하고, Jest를 활용한 테스트 환경 구축 방법을 상세히 설명함
GitHub Actions의 샤딩(Sharding) 기술을 활용하여 CI/CD 환경에서 테스트 실행 시간을 5분 이내로 단축하고, 코드 커버리지 분석 방법을 소개함
Jest 환경 설정: 복잡성 극복하기
Jest는 jsdom을 사용하여 브라우저 환경을 흉내내지만, 실제 브라우저 API를 모두 지원하지 않는다. 따라서, jsdom-testing-mocks와 같은 라이브러리를 활용하여 API 모킹을 수행해야 한다. 구체적으로, babel 또는 SWC를 사용하여 JSX와 import/export 문법을 지원하고, ts-jest를 통해 TypeScript 환경을 구성한다.
테스트 속도 개선: 샤딩과 병렬 처리
GitHub Actions에서 제공하는 리소스 제약으로 인해 테스트 실행 시간이 길어질 수 있다. 따라서, 샤딩(Sharding) 기술을 활용하여 테스트를 여러 개의 작은 단위로 분할하여 병렬 처리한다. Matrix 기능을 사용하여 여러 개의 GitHub Actions 워크플로우를 동시에 실행하고, 테스트 시간 80% 단축을 달성한다.
코드 품질 향상: 코드 커버리지 분석
테스트 코드의 품질을 측정하기 위해 코드 커버리지 분석 도구를 활용한다. Jest는 `--coverage` 옵션을 통해 코드 커버리지 리포트를 생성하고, lcov-report를 통해 상세 분석을 제공한다. 따라서, 테스트 누락 부분을 파악하고, 코드 품질을 향상시키는 데 기여한다.
