✅ Jest와 React Testing Library를 이용한 테스트 방법론

✅ Jest와 React Testing Library를 이용한 테스트 방법론

프론트엔드 개발에서 테스트 코드 작성은 안정성 확보의 핵심입니다.
React 애플리케이션에서 컴포넌트 단위 테스트와 통합 테스트를 위해 주로 사용하는 도구가 Jest와 **React Testing Library(RTL)**입니다.
이번 글에서는 기본 개념과 실무에서의 테스트 작성 방법을 중심으로 정리합니다.

---

📌 1. Jest와 React Testing Library란?

✅ Jest란?

• Facebook에서 개발한 테스트 러너이자 어설션 라이브러리입니다.
• 주로 **유닛 테스트(Unit Test)**와 **통합 테스트(Integration Test)**에 사용됩니다.
• 스냅샷 테스트를 통해 UI 변경을 감지할 수 있습니다.

✅ React Testing Library란?

• React 컴포넌트를 사용자 관점에서 테스트할 수 있도록 도와주는 라이브러리입니다.
• DOM을 직접 조작하기보다는 접근 가능한 방법으로 요소를 찾음 (예: getByRole, getByText).

---

📌 2. Jest 기본 사용법

✅ 설치

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

✅ 설정 (package.json)

"scripts": {
  "test": "jest"
}

✅ 기본 테스트 구조

// sum.js
export function sum(a, b) {
  return a + b;
}

// sum.test.js
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

✅ 실행

npm test

---

📌 3. React Testing Library 사용법

반응형

✅ 기본 테스트 구조

// components/Button.js
export function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

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

test('버튼 클릭 시 콜백이 호출되는가?', () => {
  const handleClick = jest.fn();
  render(<Button label="클릭" onClick={handleClick} />);

  const button = screen.getByText('클릭');
  fireEvent.click(button);

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

✅ 주요 메서드

메서드 설명

render()	컴포넌트를 DOM에 렌더링
screen.getByText()	특정 텍스트를 가진 요소 찾기
fireEvent.click()	클릭 이벤트 발생
expect().toBe()	값 비교 어설션
jest.fn()	목 함수(Mock Function) 생성

---

📌 4. Jest와 RTL로 상태 테스트

✅ 상태 업데이트 테스트

// Counter.tsx
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

✅ Counter.test.tsx

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

test('카운터 증가 버튼 클릭 시 상태가 변경되는가?', () => {
  render(<Counter />);

  const button = screen.getByText('증가');
  fireEvent.click(button);

  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

---

📌 5. 비동기 테스트

✅ 비동기 API 요청 테스트

// fetchData.js
export const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: 'Success' });
    }, 1000);
  });
};

// fetchData.test.js
import { fetchData } from './fetchData';

test('비동기 데이터 요청이 성공하는가?', async () => {
  const result = await fetchData();
  expect(result.data).toBe('Success');
});

✅ 마운트 후 비동기 데이터 표시

// AsyncComponent.tsx
import { useEffect, useState } from 'react';

export function AsyncComponent() {
  const [data, setData] = useState('');

  useEffect(() => {
    setTimeout(() => setData('비동기 데이터'), 1000);
  }, []);

  return <div>{data}</div>;
}

// AsyncComponent.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import { AsyncComponent } from './AsyncComponent';

test('비동기 데이터가 표시되는가?', async () => {
  render(<AsyncComponent />);

  await waitFor(() => {
    expect(screen.getByText('비동기 데이터')).toBeInTheDocument();
  });
});

---

📌 6. 스냅샷 테스트

✅ 스냅샷 생성

// Header.tsx
export function Header() {
  return <h1>Hello World</h1>;
}

// Header.test.tsx
import { render } from '@testing-library/react';
import { Header } from './Header';

test('스냅샷과 UI가 일치하는가?', () => {
  const { container } = render(<Header />);
  expect(container).toMatchSnapshot();
});

✅ 스냅샷 업데이트

npm test -- -u

---

📌 7. 실무에서 겪은 문제와 해결

🧪 문제

• 버튼 클릭 시 상태 업데이트가 안 되어서 테스트가 실패함

✅ 해결

• 상태를 업데이트하는 함수가 비동기 함수여서 await 키워드로 감싸줌

await waitFor(() => {
  fireEvent.click(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

---

📌 면접에서 이렇게 답하세요

Jest는 테스트 러너로, React Testing Library는 DOM 상호작용을 테스트하는 도구입니다.
Jest는 유닛 테스트와 스냅샷 테스트를 주로 사용하며, RTL을 통해 사용자 관점에서 UI를 테스트할 수 있습니다.
실무에서는 상태 업데이트 테스트와 비동기 처리 테스트를 주로 진행하며, 목 함수를 통해 외부 의존성을 제거하여 안정적인 테스트 환경을 구축합니다.

---

Jest,ReactTestingLibrary,유닛테스트,스냅샷테스트,비동기테스트,프론트엔드테스트,React테스트,테스트자동화,프론트엔드면접,테스트전략