✅ [24편] 리액트 테스트 완전 가이드

✅ [24편] 리액트 테스트 완전 가이드

Jest · React Testing Library로 단위 테스트부터 UI 테스트까지 
프런트엔드 개발이 점점 복잡해지면서 테스트 코드는 선택이 아니라 필수 요소가 되고 있습니다.
특히 리액트 프로젝트는 컴포넌트 기반으로 구성되어 있기 때문에 테스트를 구조화하기가 쉽고,
테스트를 잘 설계하면 버그 감소, 유지보수성 향상, 코드 신뢰도 확보라는 큰 장점을 얻을 수 있습니다.
하지만 많은 개발자들이 “테스트는 어렵다”, “시간이 오래 걸린다”라는 이유로 도입을 주저합니다.
사실 올바른 도구와 구조만 갖추면 리액트 테스트는 생각보다 훨씬 간단합니다.
이번 글에서는 리액트에서 가장 널리 사용되는
Jest + React Testing Library(RTL) 조합을 통해
리액트 테스트를 0에서 100까지 완성할 수 있도록 상세하게 안내합니다.

🟦 1. 왜 리액트 테스트가 필요한가?

테스트가 없으면 다음과 같은 문제가 반복됩니다.
작은 기능을 수정했는데 다른 기능이 갑자기 깨짐
UI 동작이 개발자 의도대로 동작하는지 확인 불가능
협업 시 품질 관리 어려움
리팩토링 시 항상 불안함
출시 직전 QA 시간 폭증
반면 테스트가 도입된 프로젝트는 다음과 같은 효과가 있습니다.
✔ 1) 코드 안정성 향상
기능이 변경되어도 기존 기능이 정상인지 자동 검증됩니다.
✔ 2) 리팩토링 속도 증가
확신을 가지고 코드를 바꿀 수 있음.
✔ 3) QA 시간 감소
사소한 오류는 테스트 단계에서 자동 발견됨.
✔ 4) 문서 역할 수행
테스트 코드는 컴포넌트가 어떻게 동작하는지 설명하는 명확한 자료가 됩니다.

🟦 2. 리액트 테스트의 종류

테스트는 목적에 따라 여러 형태로 나뉩니다.
✔ 단위 테스트(Unit Test)
컴포넌트 또는 함수 하나하나를 테스트.
예: Button 클릭 시 텍스트가 바뀌는지 검증.
✔ 통합 테스트(Integration Test)
여러 컴포넌트가 서로 상호작용하는 흐름 테스트.
✔ E2E 테스트(End-to-End Test)
실제 브라우저에서 앱을 열고 유저처럼 동작하는 자동 테스트.
(Cypress, Playwright 등)
이번 글에서는 리액트 개발자가 반드시 알아야 할
단위 테스트 + UI 테스트를 집중적으로 다룰 것입니다.

🟦 3. Jest: 테스트 환경의 기반

Jest는 페이스북이 만든 테스트 프레임워크로
리액트 테스트의 기반을 제공하는 도구입니다.
🔷 3-1. Jest 설치
CRA 또는 Vite 템플릿에는 Jest 환경이 이미 포함된 경우가 많습니다.
직접 설치하는 경우:
npm install -D jest @types/jest ts-jest
타입스크립트 적용 시 ts-jest까지 필요합니다.
🔷 3-2. Jest의 주요 기능
테스트 실행
mock 제공
스냅샷 테스트 지원
비동기 테스트 지원
Node 환경 시뮬레이션
리액트 테스트의 중심이 되는 핵심 도구입니다.

🟦 4. React Testing Library(RTL): 리액트 UI 테스트 표준 도구

React Testing Library는 리액트 UI를 실제 사용자 관점에서 테스트하도록 설계된 도구입니다.
✔ RTL의 철학
테스트는 구현이 아니라 사용자 경험을 기반으로 해야 한다.
즉,
HTML 구조에 의존하지 않고
CSS 클래스 이름에 의존하지 않고
태그보다 “사용자가 볼 수 있는 요소” 기반으로 테스트합니다.
예:
getByText, getByRole, getByLabelText 등
유저가 실제로 화면에서 접하는 대로 테스트하는 방식이기 때문에
테스트가 UI 변경에 민감하지 않고 매우 안정적입니다.

🟦 5. RTL 설치

npm install -D @testing-library/react @testing-library/jest-dom
jest-dom은 RTL에서 제공하는 커스텀 매처들을 제공합니다.
예:
expect(element).toBeInTheDocument();

🟦 6. 기본 테스트 작성해보기 (Button 예시)

아래는 가장 기본적인 테스트 예제입니다.
🔷 컴포넌트 코드
function CounterButton() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}번 클릭했습니다
</button>
);
}
export default CounterButton;
🔷 테스트 코드 작성
import { render, screen, fireEvent } from "@testing-library/react";
import CounterButton from "./CounterButton";
test("버튼 클릭 시 카운트 증가", () => {
render(<CounterButton />);
const button = screen.getByRole("button");
fireEvent.click(button);
fireEvent.click(button);
expect(button).toHaveTextContent("2번 클릭했습니다");
});
✔ 테스트 흐름 분석
render()로 컴포넌트 렌더링
getByRole로 버튼 요소 탐색
fireEvent로 클릭 이벤트 시뮬레이션
버튼 텍스트가 2로 변경되었는지 검사
이처럼 테스트 코드는 실제 유저 행동을 그대로 따라갑니다.

🟦 7. API 테스트 (mocking 활용)

API 응답을 테스트하려면 실제 서버가 필요할 것 같지만
Jest mock 기능으로 간단하게 시뮬레이션할 수 있습니다.
🔷 예시: useFetch 훅 테스트
jest.mock("../api/userApi", () => ({
getUser: jest.fn().mockResolvedValue({ name: "홍길동" })
}));
위와 같이 mock을 설정하면 실제 API 호출 없이도
테스트 환경에서 원하는 데이터를 반환할 수 있습니다.

🟦 8. 컴포넌트 렌더링 테스트 (props 기반 테스트)

render(<Greeting name="유경상" />);
expect(screen.getByText(/유경상/)).toBeInTheDocument();
props에 따라 렌더링이 달라지는 컴포넌트를 검증할 때 필수입니다.

🟦 9. Form 테스트: 입력값 변경

const input = screen.getByPlaceholderText("이메일 입력");
fireEvent.change(input, { target: { value: "test@example.com" } });
expect(input).toHaveValue("test@example.com");
UI 테스트의 가장 일반적인 패턴입니다.

🟦 10. 실무에서 사용하는 테스트 전략

✔ 전략 1: 핵심 기능부터 우선 테스트
로그인, 결제, 장바구니, 주문 등
✔ 전략 2: 컴포넌트 분리 + 테스트 별도 작성
Atom → Molecules → Organisms 순으로 테스트 설계
✔ 전략 3: 비즈니스 로직은 훅에서 테스트
컴포넌트 UI 테스트보다 로직 훅 테스트가 훨씬 효율적임
✔ 전략 4: E2E는 최소 개수만
Cypress나 Playwright로 핵심 플로우만 검증
✔ 전략 5: CI(깃허브 액션)와 연결
테스트 자동화하면 팀원 실수 대폭 감소

🟦 11. 대규모 프로젝트에서 테스트가 주는 영향

리액트 프로젝트가 커질수록 테스트는 프로젝트의 안정성과 품질을 결정합니다.
✔ 버그 발생률 감소
✔ 배포 속도 증가
✔ 코드 구조가 단단해짐
✔ 신규 개발자 온보딩 속도 상승
✔ 리팩토링 시 불안감 없어짐
테스트가 잘 갖춰진 프로젝트는 시간이 지날수록 더 강력해집니다.

🟦 결론

Jest + React Testing Library는
리액트 테스트 환경 구축의 “정답 조합”입니다.
단위 테스트 → 컴포넌트 로직 안정
UI 테스트 → 사용자 시나리오 검증
Mock → API 독립 테스트
자동화 → 릴리즈 안정성 확보
테스트는 처음에는 부담스러울 수 있지만
익숙해지면 생산성과 코드 품질이 크게 향상됩니다.