테스트

React 앱의 테스트는 보통 두 층으로 나눕니다. 컴포넌트와 훅은 Vitest와 React Testing Library로 빠르게 검사하고, 실제 브라우저에서 사용자 흐름 전체는 Playwright로 확인합니다.

Vitest와 React Testing Library 설치

Vitest는 Vite 설정을 그대로 재사용하는 테스트 도구라 별도의 변환 설정이 거의 필요 없습니다. 브라우저 DOM을 흉내 내는 jsdom과 Testing Library 패키지를 함께 설치합니다.

npm install -D vitest jsdom @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom

vite.config.ts에 test 항목을 추가합니다. 맨 위의 참조 주석은 TypeScript가 test 항목의 타입을 알게 해 줍니다.

/// <reference types="vitest/config" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: "./src/test/setup.ts",
    include: ["src/**/*.test.{ts,tsx}"],
  },
});

globals: true를 켜면 Testing Library가 각 테스트가 끝난 뒤 그린 화면을 자동으로 정리합니다. include를 정해 두면 뒤에서 만들 Playwright 테스트를 Vitest가 잘못 실행하지 않습니다. 설정 파일 src/test/setup.ts에는 toBeInTheDocument() 같은 DOM 전용 검사 함수를 등록합니다.

import "@testing-library/jest-dom/vitest";

마지막으로 package.json의 scripts에 "test": "vitest"를 추가합니다. npm test는 감시 모드로 실행되어 파일을 저장할 때마다 관련 테스트를 다시 돌리고, CI에서는 npx vitest run으로 한 번만 실행합니다.

컴포넌트 테스트

Testing Library는 구현 세부가 아니라 사용자가 보는 화면을 기준으로 테스트하도록 이끕니다. 요소는 가능하면 getByRole, getByLabelText처럼 접근성 정보로 찾고, 클릭이나 입력은 실제 사용자 동작에 가까운 user-event로 흉내 냅니다.

// src/Counter.tsx
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>클릭 {count}회</button>;
}

// src/Counter.test.tsx
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it } from "vitest";
import { Counter } from "./Counter";

describe("Counter", () => {
  it("클릭하면 숫자가 올라간다", async () => {
    const user = userEvent.setup();
    render(<Counter />);

    const button = screen.getByRole("button", { name: "클릭 0회" });
    await user.click(button);

    expect(button).toHaveTextContent("클릭 1회");
  });
});

비동기 화면과 모의 객체

데이터를 불러오는 컴포넌트는 네트워크 대신 모의 응답을 돌려주게 합니다. vi.spyOn으로 전역 fetch를 바꾸고, 나중에 나타나는 요소는 기다렸다가 찾는 findBy... 쿼리로 확인합니다. 앞 장의 UserName 컴포넌트를 예로 듭니다.

import { render, screen } from "@testing-library/react";
import { afterEach, expect, it, vi } from "vitest";
import { UserName } from "./UserName";

afterEach(() => {
  vi.restoreAllMocks();
});

it("사용자 이름을 불러와 보여 준다", async () => {
  vi.spyOn(globalThis, "fetch").mockResolvedValue(
    new Response(JSON.stringify({ id: 1, name: "하늘" })),
  );

  render(<UserName userId={1} />);

  expect(screen.getByText("불러오는 중…")).toBeInTheDocument();
  expect(await screen.findByText("하늘")).toBeInTheDocument();
});

API 호출이 많은 앱이라면 요청을 네트워크 수준에서 가로채는 Mock Service Worker(MSW)를 쓰면 테스트와 개발 서버에서 같은 모의 API를 공유할 수 있습니다.

사용자 정의 훅 테스트

화면 없이 훅만 검사하려면 renderHook을 씁니다. 상태를 바꾸는 호출은 act로 감싸 React가 업데이트를 모두 반영한 뒤 결과를 확인합니다.

import { act, renderHook } from "@testing-library/react";
import { expect, it } from "vitest";
import { useTodos } from "./useTodos";

it("할 일을 추가한다", () => {
  const { result } = renderHook(() => useTodos());

  act(() => result.current.add("우유 사기"));

  expect(result.current.todos).toHaveLength(1);
  expect(result.current.todos[0].text).toBe("우유 사기");
});

Playwright로 E2E 테스트

Playwright는 Chromium, Firefox, WebKit을 실제로 띄워 사용자처럼 앱을 조작합니다. 초기화 명령이 설정 파일, 예제 테스트, 브라우저 설치를 한 번에 처리합니다.

npm init playwright@latest

playwright.config.ts에 webServer를 지정하면 테스트 전에 개발 서버를 자동으로 띄웁니다.

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./e2e",
  use: { baseURL: "http://localhost:5173" },
  webServer: {
    command: "npm run dev",
    url: "http://localhost:5173",
    reuseExistingServer: !process.env.CI,
  },
  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
});

// e2e/counter.spec.ts (첫 화면에 Counter가 있다고 가정합니다)
import { expect, test } from "@playwright/test";

test("카운터 버튼이 동작한다", async ({ page }) => {
  await page.goto("/");
  await page.getByRole("button", { name: /클릭/ }).click();
  await expect(page.getByRole("button", { name: "클릭 1회" })).toBeVisible();
});

npx playwright test로 실행하고, --ui를 붙이면 단계별로 화면을 보며 디버깅할 수 있습니다. expect는 조건이 맞을 때까지 자동으로 기다리므로 임의의 대기 시간을 넣을 필요가 없습니다.

정리

• 컴포넌트 · 훅 테스트는 Vitest + React Testing Library, 브라우저 흐름은 Playwright로 나눕니다.
• 요소는 역할과 레이블로 찾고, 동작은 user-event로 흉내 냅니다.
• 비동기 결과는 findBy...로 기다리고, 네트워크는 vi.spyOn이나 MSW로 모의합니다.
• Playwright의 webServer 설정으로 개발 서버를 자동으로 띄워 E2E 테스트를 실행합니다.