SPA 자동화 테스트를 작성한 경험

React 기반 오디오 플레이어를 Playwright와 실제 브라우저로 테스트하며, 개별 동작보다 가입부터 주요 기능 사용까지 이어지는 전체 사용자 여정을 중시함 테스트마다 서버와 DB를 따로 띄우는 대신 같은 DB에서 각자 데이터를 생성하고, 다른 테스트의 데이터는 건드리지 않음. 생성한 데이터는 삭제하지 않아 데이터가 많은 상태에서도 검증함 S3·Stripe·Twilio 같은 외부 서비스는 모든 테스트가 공유하는 모의 구현으로 대체해, 인터넷 연결 없이 빠르고 안정적으로 실행 파일 안의 테스트까지 완전 병렬 실행하고 Chromium만 사용해, M3 MacBook Air에서 전체 테스트를 20초 조금 넘게 완료 React 초기화 전 입력이 사라지는 문제는 준비될 때까지 입력 필드를 비활성화해 해결하고, 남은 간헐적 실패에는 CI 재시도를 적용함. 모든 코드 경로보다 중요한 기능이 깨지지 않는 데 집중 테스트 대상과 사용자 여정 Réécoute는 보통 2~3시간 길이의 녹음에 최적화된 오디오 플레이어로, 서버 렌더링만으로 구현할 수 없는 여러 상호작용 기능을 갖춘 SPA임 React 기반 클라이언트가 단일 서버와 HTTP를 통해 JSON을 주고받음 속도와 SEO, JavaScript를 비활성화한 사용자를 위해 서버 렌더링도 사용하지만, 주요 기능에는 클라이언트 렌더링이 필요함 복잡성이 백엔드와 클라이언트 JavaScript에 대략 절반씩 나뉘어 있어, 양쪽의 통신까지 현실적으로 검증하도록 실제 브라우저에서 앱 전체를 테스트함 별도의 백엔드 전용 테스트도 일부 있음 테스트 코드는 오픈소스가 아니지만, 다른 프로젝트에도 적용할 수 있는 설계와 구현 경험은 공유함 주 테스트 모음은 Playwright로 작성했으며, 약 20개 파일에 각각 1~4개 테스트가 들어 있음 개별 동작을 잘게 나누기보다 전체 사용자 여정을 담은 긴 테스트를 선호함 전자상거래라면 장바구니에 상품 추가, 가입, 결제 페이지 이동, 실제 구매까지 이어지는 흐름이 해당함 가입처럼 작은 범위의 전용 테스트도 작성하지만, 사업에 중요한 종단 간 흐름을 더 중시함 데이터 격리 대신 독립적인 데이터 소유 테스트는 동일한 데이터베이스를 사용하며, 운영 환경의 사용자처럼 각자 필요한 객체를 생성함 기존 데이터에 의존하지 않고, 자신이 만들지 않은 데이터는 수정하지 않음 생성한 데이터를 정리하지 않아 데이터가 계속 쌓임 공개 데이터가 없는 Réécoute 같은 ...