Component Test

컴포넌트 테스트 관점

컴포넌트 내부 구현보다 렌더링된 텍스트, 버튼 클릭, 상태 업데이트가 의도대로 보이는지 확인합니다.

입력 조건

props 사례 고정

필수 값, 선택 옵션, 빈 상태를 테스트마다 명시해 컴포넌트 계약이 흐려지지 않게 합니다.

탐색 기준

render 결과 조회

Testing Library로 실제 DOM에 노출된 role, label, text를 기준으로 요소를 찾습니다.

이벤트 재현

fireEvent/userEvent 선택

단순 이벤트는 fireEvent, 입력 흐름과 포커스 이동은 userEvent로 나눠 사용자 행동을 맞춥니다.

판정 단계

expect 화면 계약

텍스트, 비활성 상태, 콜백 호출처럼 사용자가 관찰할 결과를 기준으로 검증합니다.

Counter 예시

작은 상호작용을 명확한 기대값으로 묶습니다

Counter처럼 버튼 클릭과 숫자 변경이 있는 컴포넌트는 사용자 동작, 상태 변화, 화면 반영을 한 테스트에 담을 수 있습니다.

테스트 관점

render테스트가 찾는 요소 이름이 실제 접근성 이름과 맞는지 먼저 확인합니다.
fireEvent/userEvent타이핑, 포커스, blur가 중요한 폼은 userEvent로 순서를 재현합니다.
expect콜백 호출뿐 아니라 화면에 남은 결과와 비활성 상태까지 함께 검증합니다.