통합 테스트 코드는 렌더, 사용자 이벤트, 비동기 검증을 한 파일에서 연결한다
ProductsPage 예시는 Server Component 렌더링, API mock, 사용자 검색 이벤트, 화면 업데이트를 함께 확인한다.
구성
역할
대표 API
실패 신호
render
페이지 또는 컴포넌트를 테스트 DOM에 올림
render(await Page())
초기 데이터가 보이지 않음
query
사용자가 찾는 방식으로 요소를 선택
getByRole, getByText
구현 세부 클래스에 의존
event
입력과 클릭을 발생시킴
fireEvent, userEvent
상태 변화가 트리거되지 않음
wait
비동기 렌더링 완료를 기다림
waitFor, findBy*
race condition으로 간헐 실패
mock
API 응답을 테스트 시나리오에 맞춤
spyOn, MSW handler
실제 응답 형식과 불일치