Component test

컴포넌트 테스트는 props, 화면, 상호작용을 한 단위로 검증한다

로직만 보는 단위 테스트보다 넓고, 전체 앱을 띄우는 E2E보다 좁습니다. UI 컴포넌트가 사용자에게 보이는 계약을 지키는지 확인합니다.

props 입력컴포넌트가 받을 데이터와 상태를 정한다.

렌더링화면에 어떤 텍스트, 버튼, 값이 보이는지 본다.

사용자 이벤트클릭, 입력, 선택 같은 상호작용을 발생시킨다.

결과 검증화면 변화와 콜백 호출이 기대와 맞는지 판단한다.

테스트 종류

주요 입력

확인 결과

적합한 질문

단위 테스트

함수 인자

반환 값, 예외

계산 로직이 맞는가?

컴포넌트 테스트

props, 사용자 이벤트

DOM 출력, 상태 변화

이 UI가 사용자의 행동에 맞게 반응하는가?

E2E 테스트

실제 브라우저와 서비스 경로

전체 사용자 여정

핵심 업무 흐름이 끝까지 되는가?