Testing Library

상품 검색 테스트는 화면 변화까지 기다린다

ProductsPage는 초기 상품을 서버에서 받고, ProductList는 검색어 입력과 버튼 클릭 뒤 모킹된 getProductsApi 응답으로 목록을 갱신합니다.

render

await ProductsPage()

Server Component가 initialProducts를 준비한 뒤 테스트 DOM에 들어갑니다.

query

getByRole

사용자가 보는 제목, input, 버튼을 접근성 기준으로 찾습니다.

event

change + click

검색어 입력과 검색 버튼 클릭으로 ProductList 상태 전환을 시작합니다.

mock

mockResolvedValueOnce

두 번째 API 응답을 검색 결과 목록으로 고정합니다.

wait

waitFor

비동기 업데이트가 끝난 뒤 노트북은 남고 마우스는 사라졌는지 확인합니다.