ReactJS 테스트: 초보자 가이드
안녕하세요, 미래의 React 개발자 여러분! React 테스트의 세계로 안내해드리게 되어 기쁩니다. 컴퓨터 과학을 오랫동안 가르쳐온 사람으로서, 테스트가 좋은 개발자를 위대한 개발자로 변모시키는 것을 직접 목격했습니다. 그麼, 함께 React 테스트를 이해해보겠습니다!
테스트의 중요성
코딩을 시작하기 전에 간단한 이야기를 공유하겠습니다. 제가 가르친 한 학생이 아름다운 React 앱을 만들었습니다. 디자인은 완벽했지만 데모 중에 앱이崩溃했습니다. 그때 그는 힘들게 배웠습니다: 외관은 속일 수 있지만 테스트는 거짓말을 하지 않는다는 것을. 테스트는 버그를 찾는 것뿐만 아니라 신뢰감을 주는 것입니다. 테스트가 통과하면, 코드가 원하는 대로 작동한다는 확신을 가지고 편안하게 잠을 수 있습니다.
Create React App: 테스트 놀이터
환경 설정
먼저 Create React App을 사용하여 새로운 React 애플리케이션을 만들어보겠습니다. 이 도구는 테스트가 이미 구성된 준비된 React 프로젝트를 설정합니다. 터미널을 엽니다:
npx create-react-app my-react-testing-app
cd my-react-testing-app축하드립니다! 테스트 기능이 내장된 첫 번째 React 앱을 만들었습니다. 배터리가 들어있는 새玩具를 받은 것과 같습니다!
첫 번째 테스트
Create React App은 예제 테스트 파일을 포함하고 있습니다. src/App.test.js를 열어보겠습니다:
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});이를 간단히 설명하겠습니다:
- 필요한 테스트 도구와 App 컴포넌트를 가져옵니다.
-
test함수를 사용하여 테스트를 정의합니다. - App 컴포넌트를 렌더링합니다.
- "learn react" 텍스트를 포함하는 요소를 찾습니다.
- 이 요소가 문서에 있는지 기대합니다.
이 테스트를 실행하려면 다음 명령어를 사용합니다:
npm test모든 것이 올바르게 설정되어 있다면, 통과한 테스트를 볼 수 있을 것입니다. 첫 번째 React 테스트를 축하합니다!
커스텀 애플리케이션에서의 테스트
이제 기본 테스트를 봤으니, 우리 자신의 컴포넌트를 만들고 테스트해보겠습니다.
간단한 컴포넌트 만들기
간단한 카운터 컴포넌트를 만들어보겠습니다. 새 파일 src/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)}>Increment</button>
</div>
);
}
export default Counter;이 컴포넌트는 카운트와 카운트를 증가시키는 버튼을 표시합니다.
카운터에 대한 테스트 작성
이제 Counter 컴포넌트를 테스트해보겠습니다. 새 파일 src/Counter.test.js를 만듭니다:
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';
test('renders initial count of 0', () => {
render(<Counter />);
const countElement = screen.getByText(/count: 0/i);
expect(countElement).toBeInTheDocument();
});
test('increments count when button is clicked', () => {
render(<Counter />);
const button = screen.getByText(/increment/i);
fireEvent.click(button);
const countElement = screen.getByText(/count: 1/i);
expect(countElement).toBeInTheDocument();
});이 테스트를 간단히 설명하겠습니다:
- 첫 번째 테스트는 초기 카운트가 0인지 확인합니다.
- 두 번째 테스트는 버튼을 클릭할 때 카운트가 1로 증가하는지 확인합니다.
다시 npm test 명령어를 실행하면, 이 새 테스트들이 통과하는 것을 볼 수 있을 것입니다!
고급 테스트 개념
기본 테스트에 익숙해지면, 더 고급 개념을 탐구하고 싶을 것입니다. 다음은 React 테스트에서 자주 사용할 방법들의 표입니다:
| 방법 | 설명 | 예제 |
|---|---|---|
| render | React 컴포넌트를 테스트 위해 렌더링 | render(<MyComponent />) |
| screen.getByText | 텍스트 콘텐트로 요소 찾기 | screen.getByText(/hello world/i) |
| screen.getByRole | ARIA 역할로 요소 찾기 | screen.getByRole('button') |
| fireEvent | DOM 이벤트 시뮬레이션 | fireEvent.click(button) |
| waitFor | 기대 조건이 통과할 때까지 기다림 | await waitFor(() => expect(element).toBeVisible()) |
| act | React 상태 업데이트를 유발하는 코드 감싸기 | act(() => { /* perform actions */ }) |
비동기 동작 테스트
React 애플리케이션은 자주 비동기 연산을 포함합니다. 다음은 데이터를 가져오는 컴포넌트를 만들고 테스트하는 예제입니다:
// UserData.js
import React, { useState, useEffect } from 'react';
function UserData() {
const [userData, setUserData] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);
if (!userData) return <div>Loading...</div>;
return <div>User Name: {userData.name}</div>;
}
export default UserData;이 컴포넌트를 테스트하는 방법:
// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';
test('loads and displays user data', async () => {
render(<UserData />);
expect(screen.getByText(/loading/i)).toBeInTheDocument();
await waitFor(() => {
expect(screen.getByText(/user name:/i)).toBeInTheDocument();
});
});이 테스트는 로딩 상태를 확인하고 사용자 데이터가 표시되는지 기다립니다.
결론
React에서의 테스트는 처음에는 어려워 보일 수 있지만, 더 나은 개발자로 성장하는 데 귀중한 기술입니다. 기억하시길, 작성하는 각 테스트는 코드의 안전망입니다. 코드가 실패할 때 잡아주고, 더 높이 도전할 수 있는 자신감을 주는 것입니다.
React 여정을 계속하면서 다양한 테스트 기술을 탐구하세요. API 호출을 모킹하고, 오류 상태를 테스트하고, 컴포넌트를 작성하기 전에 테스트를 작성하는 것을 도전해보세요 (Test-Driven Development). 연습을 통해 자연스럽게 습득될 것입니다.
기쁜 테스트를 하시고, 콘솔이 항상 통과한 테스트로 녹색이 되길 바랍니다!
Credits: Image by storyset