React Testing Library(RTL)는 컴포넌트를 jsdom 같은 테스트용 DOM(Document Object Model) 환경에 렌더하고, 사용자가 실제로 쓰는 방식으로 요소를 찾고 조작하게 해 주는 테스트 도구다. 내부 구현(state, 메서드)이 아니라 화면에 보이는 동작을 검증하라는 철학을 강하게 가진 라이브러리다.
- 역할 분담: RTL은 렌더와 DOM 조작을 맡고, Jest·Vitest 같은 테스트 러너(Test Runner)가 테스트를 찾아 실행하고 통과·실패를 판정한다. Jest와 Vitest는 문법이 거의 같고 설정만 다르다. Vite 프로젝트는 Vitest가 빠르고 편하다
- 테스트 함수가 에러를 던지면 실패, 아니면 통과다. 단언(Assertion,
expect(...).toBeInTheDocument())이 실패하면 에러를 던진다.toBeInTheDocument·toBeVisible같은 DOM 매처는 jest-dom이 준다
요소 찾기
[get | query | find][All]By[Role | LabelText | PlaceholderText | Text | DisplayValue | AltText …]get: 있어야 하는 요소(없으면 에러).query: 없음을 확인할 때(null).find: 비동기로 나타나는 요소(await필수)- Role이 1순위다.
screen.getByRole('button', { name: /저장/ })처럼 접근성 정보로 찾으면 테스트가 곧 접근성 검사가 된다. 어떤 role이 있는지 모르면logRoles(container)로 출력한다 - 서버 응답 뒤에 나타나는 요소를
getBy로 찾으면 실패한다.await findBy…를 쓴다
조작과 설정
fireEvent보다userEvent를 쓴다.const user = userEvent.setup()후await user.click(…),type,clear,hover. 모두 Promise다- Provider가 필요한 컴포넌트는
render(ui, { wrapper })를 쓰거나, 모든 Provider로 감싸는 custom render를 만들어 re-export한다 - 함수 대역(Test Double):
vi.fn()은 독립 모의 함수,vi.spyOn(obj, 'm')은 기존 메서드를 감시한다 - 디버깅:
screen.debug()로 그 시점 DOM을 찍고,test.only·test.skip으로 범위를 좁힌다
네트워크는 MSW로 API 모킹로 가로챈다. 단위·통합·E2E(End-to-End)의 균형은 테스트 피라미드, 테스트 먼저 쓰기는 테스트 주도 개발 (TDD), 깨지기 쉬운 테스트는 테스트 냄새.
출처: Testing Library - About Queries: Priority · user-event Introduction