App Router 통합 테스트: 컴포넌트·API 경계 검증 설계

경계 선택

하나의 컴포넌트 내부가 아니라 화면과 데이터 모듈의 연결 지점을 고른다.

통합 테스트 경계

외부 API와 DB는 mock 또는 test fixture로 고정해 실패 원인을 줄인다.

controlled dependency

Testing Library로 화면을 렌더링하고 사용자 이벤트 뒤 상태 변화를 확인한다.

user observable

API 모듈의 요청 파라미터, 응답 shape, 오류 처리가 화면과 맞는지 본다.

계약

컴포넌트

여러 하위 컴포넌트가 합쳐진 화면 흐름을 검증한다. 내부 구현보다 사용자에게 보이는 결과를 assertion으로 둔다.

screen behavior

API 모듈

fetch wrapper와 오류 변환이 화면 요구와 맞는지 확인한다. 네트워크 자체는 mock하되 request body와 status 처리는 검증한다.

모듈 경계

App Router

Server Component 직접 테스트는 제약이 있어 경계를 실용적으로 나눈다. 순수 데이터 함수와 클라이언트 컴포넌트를 분리하면 테스트가 쉬워진다.

testable split

mock 위치 테스트 대상 내부 로직을 mock하지 않고 외부 경계만 대체한다.

오류 상태 성공만이 아니라 로딩과 실패 UI도 검증한다.

파일 배치 테스트 파일이 검증 대상 경계와 가까운 위치에 있다.

render page -> mock API response -> user action -> assert visible result and request contract