React Testing Library

🧪 Testing Library란 무엇인가?

React Testing Library(RTL)은 사용자 관점에서 React 컴포넌트를 테스트할 수 있게 해주는 도구입니다. DOM 요소를 직접 조작하는 대신, 실제 사용자가 보는 방식대로 컴포넌트를 테스트하는 것을 목표로 합니다.

✅ 설치 방법

npm install --save-dev @testing-library/react npm install --save-dev @testing-library/jest-dom

@testing-library/jest-dom은 toBeInTheDocument() 같은 확장 matcher를 사용할 수 있게 해 줍니다.

🧩 기본 사용법

예제: 간단한 버튼 클릭 테스트

// Counter.js import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increase</button> </div> ); } export default Counter;

// Counter.test.js import { render, screen, fireEvent } from '@testing-library/react'; import Counter from './Counter'; test('버튼 클릭 시 카운트가 증가해야 함', () => { render(<Counter />); const button = screen.getByText('Increase'); fireEvent.click(button); expect(screen.getByText('Count: 1')).toBeInTheDocument(); });

🔍 주요 함수 정리

• render() : 컴포넌트를 가상 DOM에 렌더링
• screen.getByText() : 텍스트 기반 요소 탐색
• fireEvent.click() : 이벤트 트리거
• expect().toBeInTheDocument() : 요소 존재 여부 확인 (jest-dom 필요)

📌 팁: 사용자 중심 테스트

• getByRole 사용 권장 (screen.getByRole('button'))
• 너무 구체적인 내부 구조 테스트는 피하세요
• 실제 UI 변화 중심으로 결과를 검증하세요

🧠 정리

React Testing Library는 “사용자처럼 테스트하라”는 철학으로 만들어진 도구입니다. React의 로직이 아닌 UI와 상호작용에 집중한 테스트를 통해 안정적인 프런트엔드 코드를 작성할 수 있습니다.