컴포넌트 테스트 검증 기준

상태 표 작성

컴포넌트가 받을 수 있는 props와 UI 상태를 먼저 표로 나눈다.

state table

렌더 검증

Testing Library로 실제 사용자에게 보이는 role, name, text를 기준으로 찾는다.

render

이벤트 실행

클릭, 입력, 제출 뒤 callback 호출과 화면 변화를 함께 확인한다.

interaction

비동기 대기

API 결과나 debounce 뒤 UI는 findBy와 waitFor로 조건을 기다린다.

async

props

필수/선택 props와 variant별 화면 차이를 검증한다. 불가능한 조합은 타입으로 막고 가능한 조합은 테스트로 고정한다.

계약

event

내부 함수 호출보다 사용자가 일으킨 행동의 결과를 본다. 콜백 payload는 도메인 값 기준으로 검증한다.

user action

async

로딩 중, 성공, 실패 상태를 각각 테스트한다. setTimeout sleep보다 화면 조건을 기다린다.

stable wait

컴포넌트 테스트 품질

접근성 query getByRole과 accessible name을 우선 사용한다.

mock 범위 컴포넌트 외부 API만 mock하고 내부 구현은 검증하지 않는다.

회귀 신호 사용자가 보는 문구와 상태가 바뀌면 테스트가 의미 있게 실패한다.

검증 흐름

render(<Form onSubmit={fn
        overflow-wrap: break-word;
        word-break: keep-all;
      } />)
await user.type(input, "hello")
await user.click(button)
expect(fn).toHaveBeenCalledWith({ value: "hello" })