Integration Test

MSW 테스트 응답

통합 테스트는 사용자가 버튼을 누른 뒤 fetch 요청, mock 응답, DOM 변경이 한 흐름으로 이어지는지 확인합니다.

MSW 통합 테스트 구성

network mock

사용자 이벤트

검색어 입력과 클릭을 통해 실제 화면 흐름을 시작합니다.

fetch 요청

컴포넌트가 호출하는 URL과 query는 제품 코드와 동일하게 유지합니다.

MSW handler

성공, 빈 결과, 오류 응답을 handler 단위로 명확히 나눕니다.

비동기 대기

findBy나 waitFor로 렌더 완료를 기다립니다.

화면 검증

상품명, 빈 상태, 로딩 해제처럼 사용자가 보는 결과를 확인합니다.

event → fetch → MSW → response → DOM
네트워크 mock 경계

Jest mock 함수는 모듈 단위 통제에 강하고, MSW는 브라우저와 가까운 요청 흐름을 유지해야 하는 통합 테스트에 적합합니다.