테스트 전략

프로젝트에 세팅된 테스트 도구들의 목적과 사용 범위를 설명합니다.

서버 응답 Mocking(MSW)

• 목적

  • 클라이언트가 서버와 독립적으로 테스트 및 개발할 수 있도록 서버 응답을 Mocking합니다.

• 사용

  • MSW(Mock Service Worker)를 사용하면 네트워크 요청을 가로채고 미리 정의된 응답을 반환할 수 있습니다. 이를 통해 다양한 응답 시나리오를 시뮬레이션할 수 있습니다.

• 사용 범위(대상)

  MSW를 사용해 다음의 시나리오를 발생시킵니다:

  • URL이 잘못되었거나 쿼리 파라미터가 잘못 전달된 경우 에러를 반환합니다.
  • 모든 것이 정상적인 경우 mock 데이터와 200대 응답을 반환합니다.

컴포넌트 테스트(Storybook)

• 목적

  • 애플리케이션의 개별 컴포넌트를 독립적으로 검증합니다.

• 사용

  • 각 컴포넌트를 서로 격리된 환경에서 테스트합니다.
  • 컴포넌트의 다양한 상태와 prop을 확인합니다.
  • MSW를 함께 사용해 서버와의 상호작용이 필요한 컴포넌트들도 테스트합니다.
  • Chromatic으로 배포하여 백엔드 크루들도 컴포넌트를 쉽고 효율적으로 한눈에 볼 수 있도록 합니다. 동시에 프론트엔드의 진행 상황을 공유합니다.

• 사용 범위(대상)

  페이지 컴포넌트와 레이아웃 컴포넌트는 스토리를 생성하지 않습니다.

  Story를 생성하여 테스트하는 컴포넌트는 다음과 같습니다:

  • 다양한 곳에서 재사용되는 공통 컴포넌트(e.g. Button, InputField)
  • 특정 기능이나 로직을 수행하는 기능 컴포넌트(e.g. ProcessAddForm)

단위 테스트(RTL)

• 목적

  • 리액트 훅의 로직을 검증합니다.

• 사용

  • 실제 사용자가 애플리케이션을 사용하는 방식과 근접한 방식으로 테스트를 작성할 수 있게 합니다.
  • 복잡한 훅 로직을 검증하고, MSW와 함께 사용해 비동기 로직도 테스트합니다.

• 사용 범위(대상)

  현재는 프로젝트에 간단한 API 호출 훅만 존재해 RTL을 사용하고 있지 않습니다.

  추후 복잡한 도메인 로직을 검증해야 할 때 RTL 테스트를 작성할 예정입니다.

요약

MSW 모킹과 Storybook을 이용해 공통 컴포넌트와 기능 컴포넌트를 테스트하고 있으며, 현시점에 RTL을 사용하는 테스트는 없지만 추후 복잡한 도메인 로직이 생긴 경우 RTL 테스트를 작성할 예정입니다. 세 라이브러리와 관련한 세팅은 모두 완료했습니다.

---

테스트 자동화

git flow 브랜치 전략에서 develop 브랜치에 PR이 머지될 때 마다 훅 테스트와 Storybook 배포가 실행되도록 깃허브 액션을 설정해 두었습니다. 테스트 중 하나라도 통과되지 않으면 develop에 머지되지 않습니다.