Blog

도입 – 학습 목표 및 필요성

React Testing Library로 테스트 작성하기는 현대 프론트엔드 개발에서 필수적인 기술입니다. 컴포넌트가 실제 사용자 관점에서 올바르게 동작하는지 검증하는 이 라이브러리는 유지보수 가능한 코드를 작성하는 데 핵심적인 역할을 합니다. 이 튜토리얼에서는 설치부터 실전 예제까지 단계별로 학습하며, 테스트 주도 개발(TDD) 방법론을 실제로 적용하는 방법을 익힐 수 있습니다. 버그를 사전에 방지하고 리팩토링 시 안정성을 보장하는 테스트 코드 작성 능력은 시니어 개발자로 성장하는 데 반드시 필요한 역량입니다.

기본 개념 설명

React Testing Library는 Kent C. Dodds가 만든 테스트 라이브러리로, 사용자가 실제로 애플리케이션을 사용하는 방식과 유사하게 테스트를 작성하도록 설계되었습니다. 기존의 Enzyme과 달리 컴포넌트의 내부 구현이 아닌 DOM 쿼리와 사용자 인터랙션에 집중합니다. 주요 철학은 ‘테스트가 소프트웨어 사용 방식과 유사할수록 더 많은 신뢰를 제공한다’는 것입니다. 핵심 API로는 render(컴포넌트 렌더링), screen(DOM 쿼리), fireEvent와 userEvent(사용자 이벤트 시뮬레이션), waitFor(비동기 처리) 등이 있습니다. Jest와 함께 사용되며, @testing-library/jest-dom을 통해 직관적인 매처(matcher)를 제공합니다. 이를 통해 toBeInTheDocument, toHaveTextContent 같은 가독성 높은 어설션을 작성할 수 있습니다.

단계별 구현 가이드

1단계: 환경 설정

Create React App으로 생성한 프로젝트는 기본적으로 React Testing Library가 설치되어 있습니다. 기존 프로젝트에 추가하려면 다음 명령어를 실행합니다:

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

setupTests.js 파일을 생성하고 jest-dom을 import합니다:

import '@testing-library/jest-dom';

2단계: 첫 번째 테스트 작성

간단한 Button 컴포넌트를 테스트해봅시다. Button.jsx 파일을 먼저 생성합니다:

export function Button({ onClick, children }) {
  return {children};
}

그 다음 Button.test.jsx 파일을 생성합니다:

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

test('버튼이 올바른 텍스트를 렌더링한다', () => {
  render(클릭);
  expect(screen.getByText('클릭')).toBeInTheDocument();
});

3단계: 사용자 인터랙션 테스트

React Testing Library로 테스트 작성하기에서 가장 중요한 부분은 사용자 이벤트를 시뮬레이션하는 것입니다:

test('버튼 클릭 시 핸들러가 호출된다', async () => {
  const handleClick = jest.fn();
  const user = userEvent.setup();
  
  render(클릭);
  await user.click(screen.getByText('클릭'));
  
  expect(handleClick).toHaveBeenCalledTimes(1);
});

4단계: 쿼리 우선순위 이해

접근성을 고려한 쿼리 우선순위를 따라야 합니다: getByRole > getByLabelText > getByPlaceholderText > getByText > getByTestId 순서로 사용합니다. getByRole이 가장 권장되는 방법입니다:

const button = screen.getByRole('button', { name: /클릭/i });

실제 코드 예제와 설명

실무에서 자주 사용하는 로그인 폼 컴포넌트 테스트 예제입니다:

// LoginForm.jsx
import { useState } from 'react';

export function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email || !password) {
      setError('모든 필드를 입력해주세요');
      return;
    }
    onSubmit({ email, password });
  };

  return (
    

      이메일
       setEmail(e.target.value)}
      />
      
      비밀번호
       setPassword(e.target.value)}
      />
      
      로그인
      {error && 
{error}
}
    
  );
}

// LoginForm.test.jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

test('유효한 데이터로 폼을 제출한다', async () => {
  const handleSubmit = jest.fn();
  const user = userEvent.setup();
  
  render();
  
  await user.type(screen.getByLabelText(/이메일/i), '[email protected]');
  await user.type(screen.getByLabelText(/비밀번호/i), 'password123');
  await user.click(screen.getByRole('button', { name: /로그인/i }));
  
  expect(handleSubmit).toHaveBeenCalledWith({
    email: '[email protected]',
    password: 'password123'
  });
});

test('빈 필드가 있을 때 에러를 표시한다', async () => {
  const user = userEvent.setup();
  
  render();
  
  await user.click(screen.getByRole('button', { name: /로그인/i }));
  
  expect(screen.getByRole('alert')).toHaveTextContent('모든 필드를 입력해주세요');
});

고급 활용 방법

비동기 데이터 로딩을 테스트하는 방법입니다:

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

test('데이터를 로드하고 표시한다', async () => {
  render();
  
  expect(screen.getByText(/로딩중/i)).toBeInTheDocument();
  
  await waitFor(() => {
    expect(screen.getByText('사용자 1')).toBeInTheDocument();
  });
});

커스텀 렌더 함수를 만들어 Provider를 감싸는 방법:

function renderWithProviders(ui, options) {
  return render(
    
      
        {ui}
      
    ,
    options
  );
}

MSW(Mock Service Worker)를 활용한 API 모킹도 실무에서 필수적입니다. 이를 통해 실제 백엔드 없이도 통합 테스트를 작성할 수 있습니다.

마무리 및 추가 학습 자료

React Testing Library로 테스트 작성하기를 마스터하면 코드 품질과 개발 생산성이 크게 향상됩니다. 공식 문서(testing-library.com)와 Kent C. Dodds의 블로그에서 더 깊이 있는 내용을 학습할 수 있습니다. Jest 공식 문서도 함께 참고하면 좋습니다. 실전에서는 coverage 리포트를 확인하며 테스트 커버리지를 80% 이상 유지하는 것을 목표로 하세요. 지속적으로 연습하며 테스트 작성이 습관이 되도록 노력해보세요!