[TDD] 프론트엔드 테스팅 2편: React Testing Library(RTL) 컴포넌트 테스트 🧪

React Testing Library(RTL) 톺아보기! 🧪

 

“컴포넌트가 사용되는 방식 그대로 테스트하라!”

 

React Testing Library(RTL)은 사용자 관점에서 테스트를 작성할 수 있도록 돕는 라이브러리입니다.

단순히 컴포넌트가 렌더링되는지 확인하는 것이 아니라, 사용자의 행동을 고려하여 테스트를 작성하는 것이 목표입니다.

---

1️⃣ React Testing Library(RTL)이란?

💡 RTL은 단순히 UI의 DOM 요소를 확인하는 것이 아니라,

“사용자가 웹을 실제로 사용할 때처럼 테스트를 작성하는 것”을 목표로 합니다.

 

💡기존의 Enzyme과 비교하면?

• ✅ Enzyme: 컴포넌트의 내부 구현을 중점적으로 테스트
• ✅ RTL: 사용자의 행동을 기반으로 테스트

✔ Jest vs RTL 비교

항목	Jest	RTL
목적	테스트 프레임워크 (실행 환경)	React 컴포넌트 테스트
렌더링	없음	render() API 제공
비동기 지원	async/await 사용	findBy, waitFor 지원
유저 이벤트	fireEvent 사용	userEvent 지원 (더 직관적)
스냅샷 테스트	지원	Jest와 함께 사용 가능

✔ 즉, Jest는 테스트를 실행하는 환경이고, RTL은 React 컴포넌트를 테스트하기 위한 도구

✅ Jest는 실행 도구 (테스트를 실행)

✅ RTL은 컴포넌트를 실제 사용자의 관점에서 테스트하는 도구 (UI 검증)

---

2️⃣ RTL의 철학: “사용자 경험을 중심으로 테스트하라!”

✅ “React Testing Library는 구현 세부 사항이 아니라, 사용자의 입장에서 테스트하는 것이 중요하다.”

💡 기존 테스트 방식 (구현 세부 사항 테스트)

const { getByTestId } = render(<Counter />);
expect(getByTestId("counter-value").textContent).toBe("0");

 

❌ data-testid를 기반으로 테스트 → 실제 사용자 경험과 동떨어진 방식

💡 권장되는 RTL 테스트 방식

const { getByRole } = render(<Counter />);
expect(getByRole("heading", { level: 1 })).toHaveTextContent("0");

 

✔ 접근성 속성(A11y)을 기반으로 요소를 찾기 때문에, 실제 사용자와 동일한 방식으로 테스트 가능

 

✅ 즉, HTML 요소의 구현 세부 사항이 아니라,

실제 사용자가 접근할 방식으로 테스트를 작성해야 한다!

 

📌 RTL이 필요한 이유?

• ✅ 사용자 중심 테스트 → 버튼 클릭, 입력 등 실제 사용자와 유사한 테스트 가능
• ✅ 컴포넌트의 내부 구현보다 실제 동작 검증
• ✅ Jest와 완벽한 호환
• ✅ 독립적인 테스트 환경 제공 (DOM 조작 없이 가상 환경에서 실행)

---

3️⃣ React Testing Library 설치 및 설정

🔧 설치 방법

먼저, 프로젝트에 React Testing Library를 추가합니다.

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

• @testing-library/react: React 컴포넌트를 테스트할 수 있도록 지원
• @testing-library/jest-dom: Jest와 함께 사용해 DOM 테스트를 쉽게 함

🛠 Jest 설정 (package.json)

"scripts": {
  "test": "react-scripts test"
}

 

Jest는 기본적으로 react-scripts에 포함되어 있으므로, 별도의 설치 없이 사용할 수 있습니다.

---

4️⃣ React Testing Library 기본 사용법

🔍 간단한 테스트 작성

기본적인 React 컴포넌트 테스트 예제를 작성해 보겠습니다.

 

📌 예제: 버튼 클릭 테스트

import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import Counter from "../Counter"; // 테스트할 컴포넌트

test("버튼을 클릭하면 카운트가 증가해야 한다", () => {
  render(<Counter />);

  const button = screen.getByRole("button", { name: "증가" });
  expect(button).toBeInTheDocument();

  fireEvent.click(button);
  expect(screen.getByText("카운트: 1")).toBeInTheDocument();
});

 

🛠 주요 함수 및 API 설명

함수	설명
render(<Component />)	컴포넌트를 가상 DOM에 렌더링
screen.getByText(text)	특정 텍스트를 가진 요소 찾기
screen.getByRole(role, options)	역할 기반 요소 찾기 (button, heading 등)
fireEvent.click(element)	클릭 이벤트 트리거
expect(element).toBeInTheDocument()	요소가 존재하는지 확인

---

5️⃣ RTL 핵심 API & 주요 메서드

📌 render() - 컴포넌트 렌더링

import { render } from "@testing-library/react";
import Counter from "./Counter";

test("Counter가 정상적으로 렌더링되는지 확인", () => {
  render(<Counter />);
});

 

✔ render()를 통해 React 컴포넌트를 실제 브라우저 환경처럼 렌더링

📌 screen - DOM 요소 찾기

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

test("버튼이 존재하는지 확인", () => {
  render(<Counter />);
  expect(screen.getByText("증가")).toBeInTheDocument();
});

 

✔ screen.getByText("증가") → 실제 사용자처럼 텍스트로 요소를 찾는 방식

---

6️⃣ 이벤트 테스트 (유저 상호작용)

📌 userEvent vs fireEvent 차이점

메서드	설명	예제
fireEvent	기본 DOM 이벤트 트리거	fireEvent.click(button)
userEvent	실제 사용자 이벤트 시뮬레이션	userEvent.click(button)

💡 사용자 상호작용 테스트 예제

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Counter from "./Counter";

test("버튼 클릭 시 카운트 증가", async () => {
  render(<Counter />);
  const button = screen.getByRole("button", { name: "증가" });

  await userEvent.click(button);
  expect(screen.getByText("1")).toBeInTheDocument();
});

 

✔ userEvent.click()을 사용하면 실제 사용자가 버튼을 클릭하는 것과 유사한 방식으로 동작

---

7️⃣ 비동기 테스트 (findBy, waitFor)

✔ 비동기 UI가 변경될 때 기다려야 한다면 findBy 또는 waitFor 사용

💡 API 호출 후 로딩 스피너가 사라지는지 확인

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Counter from "./Counter";

test("버튼 클릭 후 비동기 데이터 확인", async () => {
  render(<Counter />);
  const button = screen.getByText("증가");

  userEvent.click(button);
  expect(await screen.findByText("데이터 로딩 완료")).toBeInTheDocument();
});

 

✔ findByText는 비동기 렌더링이 완료될 때까지 기다림

💡 API 응답이 끝난 후 UI가 변경되는지 확인

await waitFor(() => expect(screen.getByText("데이터 로딩 완료")).toBeInTheDocument());

 

✔ waitFor()을 사용하면 여러 번 UI 업데이트가 발생하는 경우에도 안정적인 테스트 가능

---

8️⃣ 테스트 작성 기법

1. 컴포넌트 테스트

컴포넌트가 올바르게 렌더링되는지 검증합니다.

 

📌 예제: Input 컴포넌트 테스트

import { render, screen } from "@testing-library/react";
import Input from "../Input";

test("입력 필드가 렌더링되어야 한다", () => {
  render(<Input />);
  expect(screen.getByPlaceholderText("이름을 입력하세요")).toBeInTheDocument();
});

 

2. 사용자 상호작용 테스트

사용자가 버튼을 클릭하거나 입력하는 동작을 테스트합니다.

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

test("입력 필드에 텍스트를 입력하면 값이 변경되어야 한다", () => {
  render(<Input />);
  const input = screen.getByPlaceholderText("이름을 입력하세요");

  fireEvent.change(input, { target: { value: "Alice" } });
  expect(input.value).toBe("Alice");
});

 

3. 비동기 테스트

API 호출 후 결과를 기다리는 테스트입니다.

📌 예제: 비동기 데이터 가져오기

import { render, screen, waitFor } from "@testing-library/react";
import UserList from "../UserList";

test("유저 목록을 올바르게 불러와야 한다", async () => {
  render(<UserList />);

  await waitFor(() => {
    expect(screen.getByText("유저 목록")).toBeInTheDocument();
  });
});

---

9️⃣ 디버깅 및 테스트 실패 시 대처법

✔ 테스트 중 오류가 발생하면, screen.debug()를 활용하면 DOM 구조를 확인 가능

💡 테스트 실패 시 디버깅 예제

test("버튼 클릭 후 텍스트 변경", async () => {
  render(<Counter />);
  screen.debug(); // 현재 DOM 상태 출력
});

 

✔ debug()를 실행하면 현재 렌더링된 DOM을 터미널에서 확인 가능

---

7️⃣ 스냅샷 테스트 (Snapshot Testing)

✔ 스냅샷 테스트는 렌더된 UI가 변경되지 않았는지 확인하는 방법

💡 기본 스냅샷 테스트

import { render } from "@testing-library/react";
import Counter from "./Counter";

test("스냅샷 테스트", () => {
  const { asFragment } = render(<Counter />);
  expect(asFragment()).toMatchSnapshot();
});

 

✔ toMatchSnapshot()을 사용하면 UI 변경 감지 가능

---

🔟 고급 기능

1. 커스텀 렌더러 사용법

테스트마다 공통적으로 필요한 Provider를 설정할 수 있습니다.

import { render } from "@testing-library/react";
import { ThemeProvider } from "styled-components";
import theme from "../theme";

const customRender = (ui, options) =>
  render(ui, { wrapper: ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>, ...options });

export * from "@testing-library/react";
export { customRender as render };

 

이제 모든 테스트에서 render() 대신 customRender()를 사용할 수 있습니다.

 

2. Mocking 및 Spying

API 요청을 Mock 처리하여 테스트할 수 있습니다.

 

📌 예제: API 요청을 Mock 처리

import { render, screen } from "@testing-library/react";
import axios from "axios";
import UserList from "../UserList";

jest.mock("axios");

test("API에서 유저 데이터를 가져와야 한다", async () => {
  axios.get.mockResolvedValue({ data: [{ id: 1, name: "Alice" }] });

  render(<UserList />);
  expect(await screen.findByText("Alice")).toBeInTheDocument();
});

---

🔟1️⃣ 모범 사례

✅ 1️⃣ 너무 구체적인 구현을 테스트하지 말 것

❌ 잘못된 예:

expect(component.state.count).toBe(1); // 내부 구현을 테스트하면 유지보수 어려움

 

✅ 올바른 예:

fireEvent.click(button);
expect(screen.getByText("카운트: 1")).toBeInTheDocument();

 

✅ 2️⃣ ID보다 접근성을 고려한 셀렉터 사용

❌ 잘못된 예:

screen.getByTestId("submit-button");

 

✅ 올바른 예:

screen.getByRole("button", { name: "제출" });

 

 

✅ 3️⃣ 네이밍 컨벤션 일관성 유지

describe("로그인 버튼", () => {
  test("로그인 버튼을 클릭하면 로그인 요청이 전송된다", () => {
    // 테스트 코드...
  });
});

---

🌟 정리: React Testing Library 핵심 포인트

✅ “사용자 입장에서 테스트하라!”

✅ render() & screen을 활용해 요소 찾기

✅ userEvent를 사용해 실제 사용자처럼 테스트

✅ 비동기 테스트 (findBy, waitFor) 필수 활용

✅ 테스트 실패 시 screen.debug()로 디버깅

✅ 스냅샷 테스트로 UI 변경 감지

 

🌷 전설의 개발자가 되어봅시당! 🌷 🎉