04 테스트 전략 - woowacourse-teams/2026-jachwi-sunbae GitHub Wiki
개요
"기능 하나 넣었더니, 다른 기능이 망가졌어요."필터 기능을 추가한 뒤 배포했는데, 팀원들과 확인해보니 정렬 기능이 작동하지 않았다. 자동으로 확인할 방법이 없어 수동으로 테스트하다 보니, 놓친 걸 뒤늦게야 알게 됐다.공통 컴포넌트를 리팩터링하거나, props 이름 하나 바꾼 것만으로도 의도치 않게 다른 화면들이 깨지는 일도 있었다.배포까지 다 나간 뒤 말고 좀 더 미리 검증할 수 있는 방법 없을까?
완료 조건
- 코드 변경(기능 추가/수정/리팩터링 등) 이후에도 기존 동작이 안정적으로 유지되는지 빠르게 검증할 수 있는 테스트 전략이 수립되어 있어야 한다.
기술 역량 목표
- 프로젝트 상황에 맞는 테스트 전략(단위/통합/E2E/시각적 테스트)을 수립하고, 주요 기능에 대해 적절한 테스트 방식을 적용할 수 있다.
- 코드 변경 시 기존 기능이 영향을 받는지 테스트를 통해 검증하고, 안정적인 서비스 품질을 유지할 수 있는 방법을 고민하고 시도해본다
1. 단위 테스트
단위테스트는 API관련 함수, 훅을 기준으로 단위테스트를 하고있습니다.
| 영역 | 테스트 내용 |
|---|---|
| 인증 | API 요청 변환, 인증 상태 저장 및 초기화 |
| 체크리스트 | 항목 변환, 순서 변경, 커스텀 항목 처리, DTO 변환 |
| 지도 | 위치 계산, 주변 시설, 마커 클러스터링, 표시 데이터 변환 |
| 매물 | 폼 검증, 금액·날짜 포맷, 방문 일정, 옵션 변환 |
| 공통 훅 | 지연 로딩, 키보드 인셋 |
| 네이티브 기능 | 앱 환경 및 네이티브 브리지 처리 |
| 분석 | PostHog 이벤트 호출 |
2. 통합 테스트
React Testing Library를 사용해 컴포넌트가 사용자의 행동에 따라 올바르게 동작하는지 검증합니다.
주요 테스트 대상은 다음과 같습니다.
- 버튼 클릭과 입력 이벤트
- 입력값 검증 메시지
- 로딩·오류·빈 상태 UI
- 체크리스트 항목 선택과 해제
- 지도 매물 선택
- 페이지 이동
- 사진 업로드 상태
- 사용자 입력에 따른 화면 변경
컴포넌트의 내부 구현보다 사용자가 실제로 확인하는 텍스트, 역할, 버튼 상태를 기준으로 테스트합니다.
MSW 기반 프론트엔드 통합 테스트는 GitHub Actions를 통해 자동 실행하고 있습니다. PR 또는 main, develop 브랜치에 프론트엔드 변경이 발생하면 테스트와 운영 빌드를 자동으로 수행하지만 실제 개발 서버와 데이터베이스까지 연결하는 서버 연동 통합 테스트 및 브라우저 기반 E2E 테스트는 아직 도입하지 않았습니다.
3. E2E 테스트
Storybook을 통해 공통 컴포넌트의 시각적 상태는 확인했지만, E2E 테스트는 아직 도입하지 않았습니다. E2E는 실제 브라우저, 인증 상태, 서버 데이터, 라우팅을 함께 관리해야 하므로 테스트 작성과 유지 비용이 높습니다.
현재는 Vitest와 React Testing Library로 주요 로직과 컴포넌트 동작을 검증하고, MSW 기반 페이지 테스트로 API 성공·실패 흐름을 재현하고 있습니다. 따라서 초기 단계에서는 빠른 피드백이 가능한 테스트를 우선했습니다.
이후 사용자 가치와 장애 영향이 큰 로그인, 매물 등록, 체크리스트 적용 흐름을 중심으로 Playwright 기반 E2E 테스트를 추가할 예정입니다.
예정
1. 로그인
2. 지도에서 매물 조회
3. 매물 상세 조회
4. 매물 등록
5. 체크리스트 적용
4. 시각적 테스트
Storybook을 사용해 UI 컴포넌트를 실제 페이지와 분리하여 다양한 상태를 확인합니다. 현재 Storybook에서 확인하는 상태는 다음과 같습니다.
- 기본 상태
- 로딩 상태
- 비활성화 상태
- 오류 상태
- 빈 상태
- 선택된 상태
- 커스텀 항목 상태
- 긴 텍스트가 입력된 상태
시각적 회귀 테스트를 도입하지 않은 이유
시각적 회귀 테스트를 도입하려면 화면별 기준 이미지 관리, 뷰포트별 캡처, 폰트·브라우저 렌더링 차이 조정, 변경 승인 절차가 필요합니다. 현재는 공통 컴포넌트의 구조와 스타일이 계속 변경되는 단계이므로 기준 이미지가 자주 바뀔 가능성이 높기 때문에 우선 Storybook과 접근성 검사를 통해 상태별 UI를 확인하고, 디자인과 컴포넌트가 안정화된 이후 자동 스냅샷 비교를 도입할 계획입니다.
5. 뮤테이션 테스트
추가중...