React Testing Library - 사용자 중심 테스트 작성하기 | 백틱

reacttestingtesting-library

React Testing Library - 사용자 중심 테스트 작성하기

강경원

강경원· 2026년 2월 10일· 읽는 데 약 3분

조회 0

React Testing Library는 사용자가 컴포넌트를 어떻게 사용하는지를 중심으로 테스트를 작성하도록 유도하는 테스트 도구입니다.
구현 세부사항보다는 사용자 관점의 동작을 검증하는 것이 핵심 철학입니다.

1. 기본 사용법

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

test("카운터가 증가한다", async () => {
  const user = userEvent.setup();
  render(<Counter />);

  const button = screen.getByRole("button", { name: /증가/i });
  await user.click(button);

  expect(screen.getByText("1")).toBeInTheDocument();
});

screen.getByRole, screen.getByText 등으로 요소를 찾습니다.
userEvent로 사용자 상호작용을 시뮬레이션합니다.

2. 쿼리 우선순위

React Testing Library는 접근성 관점에서 쿼리 우선순위를 제안합니다.

getByRole (가장 권장)
getByLabelText
getByPlaceholderText
getByText
getByTestId (최후의 수단)

// ✅ 좋은 예
const button = screen.getByRole("button", { name:  });


 button = screen.();

test("데이터를 불러온다", async () => {
  render(<UserList />);

  // 데이터가 로드될 때까지 대기
  const user = await screen.findByText("kwkang");
  expect(user).toBeInTheDocument();
});

import { rest } from "msw";
import { setupServer } from "msw/node";

const server = setupServer(
  rest.get("/api/users", (req, res, ctx) => {
    return res(ctx.json([{ id: 1, name: "kwkang" }]));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

import { renderHook, act } from "@testing-library/react";
import { useCounter } from "./useCounter";

test("카운터 훅이 동작한다", () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});