[React] 리액트 테스팅

정호·2026년 4월 14일

React

목록 보기

15/30

리액트 테스팅 기초: 코드가 코드를 검증하는 법

수동 테스트의 한계를 극복하고, 앱이 커져도 안정성을 유지할 수 있도록 테스트 코드를 작성하는 자동화 테스팅의 핵심 원리임

키워드: Unit/Integration/E2E Test, Jest, React Testing Library(RTL), AAA 패턴

1. 수동 테스트의 한계와 자동화의 필요성

우리는 보통 브라우저에서 직접 클릭하며 기능을 확인하는 수동 테스트를 진행합니다. 하지만 서비스가 커지면 다음과 같은 치명적인 문제가 발생합니다.

❖ 수동 테스트의 문제점:

회귀 버그(Regression Bug): 새 기능을 넣었을 때 기존 기능이 망가지는 것을 놓침.
심리적 부담: "이거 수정하면 다른 데 터지는 거 아냐?"라는 두려움 발생.
비효율성: 복잡한 앱을 매번 전수 조사하는 것은 불가능함.

자동화 테스팅은 수동 테스트를 대신하는 것이 아니라, 코드가 코드를 검사하게 함으로써 개발자의 확신을 더해주는 도구입니다.

2. 테스팅의 3가지 유형

자동화 테스트는 검사하는 범위에 따라 세 단계로 구분됩니다.

유형	테스트 범위	특징
단위 테스트 (Unit)	함수, 개별 컴포넌트	가장 작고 빠르며, 로직의 정확성을 검증함
통합 테스트 (Integration)	여러 컴포넌트의 협력	컴포넌트끼리 데이터를 잘 주고받는지 확인함
E2E 테스트	앱 전체 흐름 (End-to-End)	실제 사용자처럼 로그인부터 결제까지 시뮬레이션함

3. 테스팅 도구의 역할: Jest & RTL

리액트 앱은 보통 두 가지 도구의 조합으로 테스트를 진행합니다.

Jest (심판): 테스트 코드를 실행하고 결과가 성공인지 실패인지 판단하는 테스트 러너입니다.
React Testing Library (시뮬레이터): 가상의 브라우저(JSDOM)에 컴포넌트를 렌더링하고 사용자의 행동을 흉내 냅니다.

4. 실전 코드 분석 및 AAA 패턴

테스트 코드는 Arrange(준비), Act(행동), Assert(단언)라는 3단계 법칙을 따를 때 가장 명확합니다.

import { render, screen } from '@testing-library/react';
import App from './App';

test('리액트 학습 링크가 렌더링되는지 확인', () => {
  // 1. Arrange (준비): 테스트할 컴포넌트를 가상 DOM에 띄움
  render(<App />);

  // 2. Act (행동): 필요한 요소를 찾음 (/i는 대소문자 무시)
  const linkElement = screen.getByText(/learn react/i);

  // 3. Assert (단언): 결과가 맞는지 확인 (문서에 존재하는가?)
  expect(linkElement).toBeInTheDocument();
});