NEXT · TEST
서버 컴포넌트와 클라이언트 컴포넌트 통합 테스트 흐름
Next 통합 테스트는 서버에서 준비된 데이터가 클라이언트 UI로 전달되고, 사용자 상호작용 후 DOM이 올바르게 바뀌는지를 함께 확인합니다.
테스트 시나리오
integration
초기 데이터
서버 컴포넌트나 API 함수가 목록 데이터를 준비합니다.
Client UI
검색 input과 버튼이 사용자 이벤트를 받습니다.
mocked API
외부 요청은 테스트용 응답으로 대체합니다.
await update
비동기 상태 변화가 끝날 때까지 기다립니다.
DOM 검증
필터링된 상품명과 빈 상태 문구를 확인합니다.
데이터
→
UI
→
mock
→
대기
→
테스트 범위
검증 범위
범위
서버 직접 렌더 한계
Server Component 자체보다 전달 데이터와 결과를 중심으로 봅니다.
사용자 이벤트
fireEvent보다 user-event가 실제 행동에 가깝습니다.
비동기 대기
findBy 또는 waitFor로 렌더 완료를 기다립니다.
외부 의존성
네트워크와 DB는 mock으로 통제합니다.