테스트난이도 보통⏱ 테스트 수에 비례(점진적)
Enzyme에서 React Testing Library로 마이그레이션
Enzyme→React Testing Library
요약: Enzyme의 구현 세부(shallow·state 접근) 중심 테스트를 사용자 관점(역할·텍스트로 찾고 상호작용)으로 다시 씁니다. React 18+는 Enzyme이 사실상 미지원이라 전환이 불가피합니다.
왜 옮기나
- Enzyme은 React 18 어댑터가 공식 지원되지 않아 최신 React에서 막힙니다.
- RTL은 구현이 아니라 사용자가 보는 결과를 테스트해 리팩터링에 강합니다.
- Testing Library는 현재 React 테스트의 사실상 표준입니다.
전제 — 현재 상태
Enzyme + adapter, shallow/mount, wrapper.find/state/props 사용.
마이그레이션 단계
1
RTL 설치
Testing Library와 user-event, jest-dom 매처를 설치합니다.
npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom2
render로 교체
shallow/mount를 render로 바꿉니다. RTL은 shallow 렌더가 없고 실제 DOM에 렌더합니다.
import { render, screen } from '@testing-library/react'
render(<Button>저장</Button>)3
쿼리를 역할·텍스트로
wrapper.find(CSS선택자) 대신 getByRole·getByText·getByLabelText로 사용자 관점에서 요소를 찾습니다.
screen.getByRole('button', { name: '저장' })4
상호작용은 user-event
simulate 대신 userEvent로 실제 사용자 동작을 모사합니다.
import userEvent from '@testing-library/user-event'
await userEvent.click(screen.getByRole('button'))⚠️ 막히는 케이스 · 함정
- state/props를 직접 단언하던 Enzyme 테스트는 RTL 철학과 맞지 않습니다 — 화면에 보이는 결과를 단언하도록 다시 설계하세요.
- shallow 렌더가 없으므로 자식 컴포넌트를 모킹할지 그대로 렌더할지 정해야 합니다.
- 비동기 갱신은 findBy*/waitFor로 기다립니다.
✅ 검증: 전환한 테스트가 통과하고, 의도적으로 컴포넌트를 깨뜨렸을 때 테스트가 실패하는지(거짓 통과 방지)를 확인합니다.
React Testing LibraryEnzyme테스트Jestuser-event