react-testing-library은(는) 무엇을 하나요?
React Testing Library: 사용자 중심의 컴포넌트 테스트 - 쿼리, 사용자 이벤트 시뮬레이션, 비동기 유틸리티 및 접근성 우선 API를 제공합니다. React 컴포넌트 테스트 작성, role/label/text로 요소 선택, 사용자 이벤트 시뮬레이션 또는 비동기 UI 동작 테스트에 사용하세요. 키워드: React Testing Library, @testing-library/react, user-event, 쿼리, render.
주요 기능
- 쿼리 (Queries):
getByRole,getByLabelText,getByText,getByTestId등 접근성 기반 쿼리 사용 - 사용자 이벤트:
fireEvent및@testing-library/user-event를 통한 실제 사용자 동작 시뮬레이션 - 비동기 유틸리티:
waitFor,findBy*,waitForElementToBeRemoved로 비동기 UI 처리 - 렌더링:
render함수로 가상 DOM에 컴포넌트 렌더링 - 접근성 우선: role, label, text 등 실제 사용자가 인식하는 방식으로 요소 선택
사용 예시
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';
test('버튼 클릭 시 메시지 표시', async () => {
render(<MyComponent />);
const button = screen.getByRole('button', { name: /클릭/i });
await userEvent.click(button);
await waitFor(() => {
expect(screen.getByText(/성공/i)).toBeInTheDocument();
});
});
설치
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event
주요 API
| 함수 | 설명 |
|---|---|
render(ui, options) | 컴포넌트를 가상 DOM에 렌더링 |
screen.getByRole(role, options) | ARIA role로 요소 검색 |
screen.getByLabelText(text) | label 텍스트로 요소 검색 |
screen.getByText(text) | 텍스트 내용으로 요소 검색 |
screen.getByTestId(id) | data-testid 속성으로 요소 검색 |
fireEvent(node, event) | DOM 이벤트 발생 |
userEvent.setup() | 사용자 이벤트 시뮬레이터 초기화 |
waitFor(callback, options) | 조건이 충족될 때까지 대기 |
findBy* 쿼리 | 프로미스 기반 비동기 쿼리 |
모범 사례
- 접근성 우선:
getByRole,getByLabelText등 접근성 쿼리를 우선 사용하세요. - 구현 세부사항 회피:
container.querySelector나getByTestId는 최후의 수단으로 사용하세요. - 사용자 관점: 테스트는 실제 사용자 상호작용을 시뮬레이션해야 합니다.
- 비동기 처리: 상태 변경 후 UI 업데이트는
waitFor또는findBy*를 사용하세요.