[React] 어플리케이션 테스트 – Jest와 Testing Library로 테스트 완전 정복! 🧪

React 애플리케이션의 품질을 높이기 위해 테스트는 필수입니다! Jest와 React Testing Library를 사용하면 간단하고 강력한 테스트를 작성할 수 있습니다. 오늘은 단위 테스트와 통합 테스트를 통해 안정적인 React 앱을 만드는 방법을 소개합니다. 준비되셨나요? 😊

---

반응형

1. Jest와 React Testing Library 소개 📚

• Jest: Facebook에서 개발한 JavaScript 테스트 프레임워크로, React와 함께 사용할 때 강력한 기능을 제공합니다.
  • 특징: 스냅샷 테스트, 모의 함수(mock functions), 코드 커버리지 보고서.
• React Testing Library: DOM을 중심으로 사용자 관점에서 React 컴포넌트를 테스트하도록 도와주는 도구입니다.
  • 특징: 실제 사용자 인터랙션 시뮬레이션, 단순하고 직관적인 API.

---

2. 테스트 환경 설정하기 ⚙️

1)필수 패키지 설치:

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

  

2)Jest 설정 파일 추가: package.json에 다음을 추가하세요:

"jest": {
  "testEnvironment": "jsdom"
}

 

3) 테스트 스크립트 실행:

npm test

---

3. 단위 테스트 작성하기 🧩

단위 테스트는 컴포넌트가 예상대로 작동하는지 확인합니다. Button 컴포넌트를 예로 들어보겠습니다.

Button 컴포넌트:

import React from 'react';

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

테스트 코드:

Button.test.js 파일:

import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('버튼 클릭 이벤트 테스트', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click Me</Button>);

  const button = screen.getByText('Click Me');
  fireEvent.click(button);

  expect(handleClick).toHaveBeenCalledTimes(1);
});

코드 설명:

• render: 컴포넌트를 렌더링합니다.
• screen.getByText: 텍스트 기반으로 요소를 검색합니다.
• fireEvent.click: 버튼 클릭 이벤트를 시뮬레이션합니다.
• expect: 결과를 검증합니다.

---

4. 통합 테스트 작성하기 🔗

통합 테스트는 여러 컴포넌트가 함께 작동하는 방식을 검증합니다. 간단한 To-Do 앱의 테스트를 작성해보겠습니다.

ToDoApp 컴포넌트:

import React, { useState } from 'react';

const ToDoApp = () => {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    setTasks([...tasks, input]);
    setInput('');
  };

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a task"
      />
      <button onClick={addTask}>Add</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
};

export default ToDoApp;

테스트 코드:

ToDoApp.test.js 파일:

import { render, screen, fireEvent } from '@testing-library/react';
import ToDoApp from './ToDoApp';

test('To-Do 항목 추가 테스트', () => {
  render(<ToDoApp />);

  const input = screen.getByPlaceholderText('Add a task');
  const button = screen.getByText('Add');

  fireEvent.change(input, { target: { value: 'Learn Testing' } });
  fireEvent.click(button);

  expect(screen.getByText('Learn Testing')).toBeInTheDocument();
});

코드 설명:

• fireEvent.change: 입력 필드의 값을 변경합니다.
• toBeInTheDocument: 요소가 DOM에 존재하는지 확인합니다.

---

5. 스냅샷 테스트 📸

스냅샷 테스트는 컴포넌트의 UI가 예상대로 렌더링되는지 확인합니다.

예제 코드:

import { render } from '@testing-library/react';
import Button from './Button';

test('버튼 스냅샷 테스트', () => {
  const { asFragment } = render(<Button>Snapshot Test</Button>);
  expect(asFragment()).toMatchSnapshot();
});

실행 결과:

처음 실행하면 스냅샷 파일이 생성됩니다. 이후 테스트 실행 시 UI 변경이 감지되면 알림을 받습니다.

---

6. Mocking과 테스트 최적화 🛠️

• Mocking API 요청: 외부 API를 호출하지 않고 가상 데이터를 테스트합니다.

jest.mock('axios');
import axios from 'axios';

test('API 호출 Mocking', async () => {
  axios.get.mockResolvedValue({ data: { message: 'Success' } });

  const result = await axios.get('/api/data');
  expect(result.data.message).toBe('Success');
});

• 코드 커버리지 확인: Jest는 코드 커버리지 보고서를 제공합니다:

npm test -- --coverage

---

7. 마무리 🎉

Jest와 React Testing Library를 활용하면 React 애플리케이션의 테스트를 간단하고 효과적으로 작성할 수 있습니다. 단위 테스트, 통합 테스트, 스냅샷 테스트 등 다양한 방식을 시도해 보세요. 🚀

테스트로 더 안정적이고 신뢰받는 애플리케이션을 만들어보세요! 💪