728x90
반응형
https://testing-library.com/docs/guiding-principles/
Guiding Principles | Testing Library
[The more your tests resemble the way your software is used, the more
testing-library.com
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인지 상관없어요.
- 그래서 리팩토링해도 테스트가 안정적입니다.
728x90
반응형
'Test' 카테고리의 다른 글
| [Test] 행동 주도 개발 (Behavior-Driven Development, BDD)이란? (1) | 2025.07.13 |
|---|---|
| [Test] E2E 테스트란? (0) | 2025.07.13 |
| [Front Test] 스냅샷 테스트 (0) | 2025.07.13 |
| [Front Test] div를 남발하면 안되는 이유 (접근성) (0) | 2025.07.13 |
| [front-test] 프론트엔드 테스트 (0) | 2025.07.13 |