🧩 테스트 전략

💡 테스트 도구

기능 테스트

• Jest

UI 테스트

• Storybook

💡 Jest

테스트 단위

• 단위 테스트

테스트 범위

• 유틸 함수 및 커스텀 훅

품질 목표

• 유틸 함수와 커스텀 훅의 모든 기능이 예상대로 동작하는지 확인한다.
• 다양한 입력 값과 경계 상황에서의 정확한 결과를 검증한다.

역할 및 책임

• 모든 프론트엔드 팀원

테스트 방법

• 단위 테스트 작성
  • 각 유틸 함수와 커스텀 훅에 대해 가능한 모든 입력 값과 시나리오를 고려하여 테스트 케이스를 작성한다.
  • 정상 동작 뿐만 아니라, 예외 상황과 경계 조건에 대한 테스트 케이스를 포함한다.
• 테스트 실행
  • yarn test 명령어를 사용하여 Jest 테스트를 실행한다.
  • 코드 변경 시, 자동으로 테스트가 실행되도록 설정한다.
• CI
  • PR이 제출되었을 때 테스트가 자동으로 실행되고, 결과를 확인하여 문제가 없으면 병합할 수 있도록 한다.

사용할 테스트 도구

• Jest
• RTL
• Github Actions

💡 Storybook

테스트 단위

• UI 테스트

테스트 범위

• 페이지를 제외한 모든 컴포넌트

품질 목표

• 컴포넌트의 상태를 docs로 한눈에 확인할 수 있어야 한다.
• 컴포넌트의 다양한 상태(예: 기본, 호버, 클릭, 활성화, 비활성화 등)를 시각적으로 확인할 수 있어야 한다.

역할 및 책임

• 모든 프론트엔드 팀원

테스트 방법

• Storybook과 Chromatic을 연동하여, 자동화된 UI 테스트를 진행한다.
• PR이 제출되었을 때 Storybook을 빌드하여 에러가 발생하지 않는지 체크한다.
• PR이 머지되었을 때 Storybook을 자동으로 배포한다.

사용할 테스트 도구

• Storybook
• Chromatic
• Github Actions

테스트 환경

• 반응형 UI 대응 범위

  • 모바일 환경(iPhone SE(375 x 667) ~ iPad mini(768 x 1024))
  • 데스크톱 환경(width 769px 이상)

• 지원 브라우저 버전 범위

  데스크탑 브라우저	지원 버전
  Google Chrome	최신 버전 및 최신 버전 -1
  Mozilla Firefox	최신 버전 및 최신 버전 -1
  Microsoft Edge	최신 버전 및 최신 버전 -1
  Safari	최신 버전 및 최신 버전 -1
  Opera	최신 버전 및 최신 버전 -1