[front test] 사용자처럼 테스트하자

https://testing-library.com/docs/guiding-principles/

Guiding Principles | Testing Library

testing-library의 원칙에 보면

 

렌더링 도구는 DOM 노드와만 상호작용해야 한다

라는 원칙이 있다. 이게 무슨말인지 알아보자.

 

🧩 컴포넌트 인스턴스 vs. DOM 노드

✅ DOM 노드 중심의 테스트 (권장 방식)

• 사용자가 실제로 브라우저에서 보는 텍스트, 버튼, 입력창 등과 상호작용하는 방식
• Testing Library는 주로 이런 식으로 테스트합니다:

render(<LoginForm />)

const usernameInput = screen.getByLabelText(/username/i)
fireEvent.change(usernameInput, { target: { value: 'Alice' } })

여기서 getByLabelText, fireEvent.change는 모두 화면에 보이는 HTML 요소(DOM) 를 대상으로 합니다.

---

❌ 컴포넌트 인스턴스 기반의 테스트 (지양하는 방식)

const component = shallow(<LoginForm />)
component.instance().someInternalMethod()

• 위는 Enzyme 같은 라이브러리에서 사용하는 방식으로,
• 내부의 컴포넌트 인스턴스를 얻어와서 메서드를 호출하거나 상태를 확인합니다.
• 사용자 관점이 아니라, 개발자 관점(구현 내부를 파고드는) 테스트입니다.
• 구현 내부 ( state, instance 등) 에 접근해서 테스트하면, 컴포넌트가 어떻게 구현되어 있는지에 강하게 의존하게 됩니다.
• 내부 구현이 바뀌면 테스트가 고장나요.

---

 

✅ 좋은 테스트 방식 (DOM 기반)

render(<Counter />)
expect(screen.getByText(/count/i)).toHaveTextContent('Count: 0')

fireEvent.click(screen.getByText(/increment/i))
expect(screen.getByText(/count/i)).toHaveTextContent('Count: 1')

• 이 테스트는 사용자가 보는 화면의 텍스트와 버튼 클릭만을 기준으로 동작합니다.
• 내부에 어떤 상태를 쓰는지, useState인지 useReducer인지 상관없어요.
• 그래서 리팩토링해도 테스트가 안정적입니다.