React에서 React Testing Library 사용법

 

 

React 애플리케이션을 개발할 때, 테스트는 코드 품질을 유지하고 잠재적인 문제를 예방하는 중요한 작업입니다. React Testing Library는 React 컴포넌트를 실제 사용자 관점에서 테스트할 수 있도록 설계된 도구로, 사용자 인터페이스의 기능과 동작을 검증하는 데 중점을 둡니다. 이 글에서는 React Testing Library의 주요 개념과 사용법을 단계별로 설명하고, 실무에 적용 가능한 예제를 함께 살펴보겠습니다.

---

1. React Testing Library란 무엇인가?

React Testing Library는 사용자 중심의 테스트를 지향하는 테스팅 도구입니다.
이 도구는 React 컴포넌트가 렌더링되는 방식과 사용자가 애플리케이션을 상호작용하는 방식을 시뮬레이션하여 테스트를 작성할 수 있게 해줍니다.

React Testing Library의 주요 특징

• 사용자 중심의 테스트: DOM을 기반으로 컴포넌트의 렌더링 결과를 검증합니다.
• Best Practices 지향: 구현 세부 사항보다는 사용자 관점에 초점을 맞춥니다.
• React와 긴밀하게 통합: React Hooks와 Context와 같은 최신 React 기능과 잘 동작합니다.

---

2. React Testing Library 설정하기

React Testing Library를 사용하려면 몇 가지 의존성을 설치해야 합니다.
먼저, 프로젝트에 아래의 라이브러리를 설치하세요:

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

설치된 주요 라이브러리

• @testing-library/react: React Testing Library의 핵심 패키지
• @testing-library/jest-dom: Jest와 함께 사용하는 DOM 확장 매처 (예: toBeInTheDocument())

설치가 완료되면 테스트 환경에서 React Testing Library를 사용할 준비가 완료됩니다.

---

3. 테스트 작성의 기본 흐름

React Testing Library를 사용할 때는 다음 네 단계를 기반으로 테스트를 작성합니다.

1. 컴포넌트 렌더링: render 메서드를 사용하여 컴포넌트를 DOM에 렌더링합니다.
2. 요소 선택: screen 객체를 활용하여 DOM에서 원하는 요소를 찾습니다.
3. 사용자 동작 시뮬레이션: fireEvent 또는 userEvent를 사용하여 사용자의 행동을 재현합니다.
4. 결과 검증: expect 문을 활용하여 DOM 상태를 검증합니다.

---

4. 실습: 간단한 Counter 컴포넌트 테스트하기

다음은 간단한 Counter 컴포넌트를 테스트하는 예제입니다.

4.1 Counter 컴포넌트 구현

먼저, 테스트 대상이 될 Counter 컴포넌트를 작성합니다:

import React, { useState } from "react";

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

  return (
    <div>
      <h1>Counter</h1>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
};

export default Counter;

4.2 Counter 테스트 코드 작성

Counter 컴포넌트를 테스트하려면 아래와 같은 테스트 코드를 작성합니다:

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

test("Counter 컴포넌트 렌더링 및 동작 테스트", () => {
  // 1. 컴포넌트 렌더링
  render(<Counter />);

  // 2. 요소 선택
  const incrementButton = screen.getByText("증가");
  const decrementButton = screen.getByText("감소");
  const countText = screen.getByText(/현재 값:/);

  // 3. 초기 상태 검증
  expect(countText).toHaveTextContent("현재 값: 0");

  // 4. 사용자 동작 시뮬레이션
  userEvent.click(incrementButton);
  expect(countText).toHaveTextContent("현재 값: 1");

  userEvent.click(decrementButton);
  expect(countText).toHaveTextContent("현재 값: 0");
});

결과 설명

위 테스트 코드는 다음과 같은 과정을 거칩니다:

1. Counter 컴포넌트를 렌더링하고, DOM에서 필요한 요소를 선택합니다.
2. 초기 상태(현재 값: 0)를 검증합니다.
3. 증가 및 감소 버튼 클릭 후 상태가 올바르게 업데이트되는지 확인합니다.

---

5. React Testing Library의 주요 API

React Testing Library는 테스트를 작성할 때 유용한 다양한 API를 제공합니다. 여기서는 자주 사용하는 API를 소개합니다.

5.1 render

컴포넌트를 DOM에 렌더링합니다.

const { container } = render(<MyComponent />);

5.2 screen

DOM에서 요소를 찾기 위한 객체입니다.

• getBy... 시리즈: 요소를 찾지 못하면 테스트 실패
• queryBy... 시리즈: 요소를 찾지 못해도 실패하지 않음
• findBy... 시리즈: 비동기 요소를 기다림

const button = screen.getByRole("button", { name: "Submit" });

5.3 fireEvent와 userEvent

사용자 이벤트를 시뮬레이션합니다.

• fireEvent: 단순 이벤트 (ex: 클릭, 키보드 입력)
• userEvent: 보다 현실적인 시뮬레이션 (ex: 입력 필드에 텍스트 입력)

fireEvent.click(button);
userEvent.type(input, "React Testing Library");

---

6. 실무에서의 Best Practices

React Testing Library를 효과적으로 사용하기 위해 다음의 Best Practices를 따르는 것이 좋습니다.

6.1 사용자 중심의 테스트 작성

UI 구현 세부 사항보다는 사용자 경험을 중심으로 테스트를 설계하세요.

screen.getByRole("button", { name: "Submit" }); // 사용자 관점에서 버튼 식별

6.2 테스트 커버리지 관리

중요한 로직과 사용자 흐름을 포함하여 테스트 커버리지를 보장합니다.

6.3 테스트 환경 독립성 유지

테스트 간 상태가 독립적이어야 하며, 하나의 테스트가 실패해도 다른 테스트에 영향을 주지 않도록 합니다.

---

결론

React Testing Library는 React 애플리케이션의 테스트를 사용자 중심으로 작성할 수 있는 강력한 도구입니다.
컴포넌트의 동작을 실제 사용자 관점에서 검증함으로써 더 안정적이고 유지보수 가능한 코드를 작성할 수 있습니다.
위에서 다룬 기본 개념과 실습 예제를 활용해 프로젝트에 React Testing Library를 도입해 보세요!

지금 바로 시작하세요. 더 나은 테스트는 더 나은 코드로 이어집니다.