rtl test loop

컴포넌트 테스트는 사용자가 보는 결과를 기준으로 읽는다

Counter 예제의 핵심은 내부 state를 직접 검사하지 않는 것입니다. 컴포넌트를 렌더링하고, 접근성 기준으로 버튼을 찾고, 클릭 후 화면의 숫자가 바뀌었는지 확인합니다.

render

화면 준비

`render(<Counter />)`로 JSDOM에 실제 DOM을 만들고 테스트가 관찰할 화면을 준비합니다.

screen

사용자식 탐색

버튼 이름, 텍스트, 테스트 ID처럼 사용자가 인지 가능한 단서로 요소를 찾습니다.

expect

결과 검증

`toHaveTextContent`와 `toBeInTheDocument`로 화면에 남은 결과를 문장처럼 확인합니다.

1

초기값

카운트가 0으로 보이는지 본다.

2

증가

증가 버튼 클릭 후 1을 확인한다.

3

감소

감소 버튼 클릭 후 -1을 확인한다.

4

복귀

증가 뒤 감소하면 0으로 돌아온다.

5

분리

각 테스트는 독립적으로 렌더링한다.

avoid

컴포넌트의 내부 변수명이나 구현 순서에 기대면 리팩터링에 약해집니다. 화면에 드러난 역할, 이름, 텍스트를 기준으로 테스트하면 컴포넌트가 사용자에게 제공하는 약속을 더 안정적으로 검증할 수 있습니다.