React 앱 테스트 전략 – 유닛 테스트부터 E2E까지

React 앱 테스트 전략 – 유닛 테스트부터 E2E까지

---

React로 앱을 개발할 때,
기능은 동작하는데 실제 유저가 제대로 사용할 수 있는지 확신이 없을 때가 많습니다.
이런 불확실성을 줄이기 위해 테스트 코드를 작성하는 것이 중요합니다.

이번 글에서는 React 앱을 위한 테스트 전략 전체 흐름을 소개하고,
Jest + React Testing Library를 활용한 유닛 테스트,
Cypress를 통한 E2E 테스트 작성법까지 단계적으로 정리해보겠습니다.

---

✅ 왜 테스트가 필요한가?

• 기능 추가 시 기존 코드가 깨지지 않았는지 확인
• 리팩토링 후 버그 없이 동작하는지 보장
• 협업 시 신뢰성 확보
• 제품의 품질을 자동으로 검증할 수 있음

---

🧪 테스트 종류와 역할

반응형

종류 도구 설명

유닛(Unit) 테스트	Jest + RTL	개별 함수/컴포넌트 단위 테스트
통합(Integration) 테스트	Jest + RTL	여러 컴포넌트가 함께 동작하는 흐름 테스트
E2E(End-to-End) 테스트	Cypress / Playwright	실제 사용자가 사용하는 전체 시나리오 테스트

---

🔧 기본 환경 구성 (Jest + RTL)

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

package.json에 추가

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

---

🔹 유닛 테스트 예제 – 버튼 클릭 테스트

// Counter.tsx
export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>카운트: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </>
  );
}

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

test("버튼 클릭 시 카운트 증가", () => {
  render(<Counter />);
  const button = screen.getByText("+1");
  userEvent.click(button);
  expect(screen.getByText("카운트: 1")).toBeInTheDocument();
});

✅ 테스트는 기능 설명 → 실행 → 검증 순서로 작성

---

🔹 입력(Form) 테스트

// Form.tsx
export function Form() {
  const [value, setValue] = useState("");
  return (
    <input
      placeholder="이름 입력"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

// Form.test.tsx
test("입력 필드 변경 테스트", () => {
  render(<Form />);
  const input = screen.getByPlaceholderText("이름 입력");
  userEvent.type(input, "Alice");
  expect(input).toHaveValue("Alice");
});

---

🔍 통합 테스트 예시 – 로그인 흐름

test("이메일과 비밀번호 입력 후 로그인 버튼 클릭", () => {
  render(<LoginForm />);
  userEvent.type(screen.getByLabelText("이메일"), "test@example.com");
  userEvent.type(screen.getByLabelText("비밀번호"), "123456");
  userEvent.click(screen.getByRole("button", { name: "로그인" }));

  expect(screen.getByText("환영합니다")).toBeInTheDocument();
});

✅ 실제 사용자의 행동을 그대로 흉내내는 방식

---

🧭 E2E 테스트 – Cypress 소개

설치

npm install --save-dev cypress
npx cypress open

기본 테스트 예제

describe("홈 페이지 테스트", () => {
  it("타이틀이 보인다", () => {
    cy.visit("http://localhost:3000");
    cy.contains("React 앱에 오신 걸 환영합니다");
  });
});

✅ 실제 브라우저에서 돌아가는 사용자 시나리오 테스트

---

🧠 오늘의 요약

항목 설명

유닛 테스트	컴포넌트/함수 단위 테스트 (Jest + RTL)
통합 테스트	여러 컴포넌트와 흐름 테스트
E2E 테스트	전체 사용자 시나리오 테스트 (Cypress)
테스트 도구	jest, @testing-library/react, cypress
테스트 작성법	사용자 관점으로 구성 + 역할 중심 테스트

---

🧪 실습 과제

1. 버튼 클릭 후 상태가 변하는 컴포넌트를 테스트해보세요
2. 사용자 입력 필드(Form) 테스트 작성
3. Cypress로 메인 페이지 접근 후 텍스트 노출 여부 확인

---

📌 다음 글 예고

👉 React 프로젝트에서 성능 최적화 실전 전략 – Lazy Loading, 코드 분할, 메모이제이션까지

• 페이지 단위 Lazy Load
• React.lazy, Suspense 사용법
• bundle 크기 최적화 전략 정리

---

 

React 테스트, React Testing Library, Jest 테스트, Cypress E2E, 컴포넌트 테스트, React 유닛 테스트, 입력 폼 테스트, React 테스트 코드, 상태 변경 테스트, React QA 자동화