icon
14장 : 테스팅

컴포넌트 테스트

컴포넌트 테스트(Component Testing) 는 UI 컴포넌트가 독립적으로 올바르게 렌더링되고, 사용자 상호작용에 따라 예상대로 동작하며, 전달된 props에 따라 올바른 UI를 표시하는지 검증하는 데 중점을 둡니다. 단위 테스트와 유사하지만, 컴포넌트의 특정 로직뿐만 아니라 시각적인 출력과 사용자 경험까지 고려한다는 점에서 더 광범위한 의미를 가집니다.

Next.js 환경에서는 React 컴포넌트가 핵심 빌딩 블록이므로, 컴포넌트 테스트는 애플리케이션의 안정성과 UI 품질을 보장하는 데 매우 중요합니다. 이 절에서는 컴포넌트 테스트의 중요성, Next.js 프로젝트에서 컴포넌트 테스트를 위한 도구(@testing-library/react 및 Jest, 또는 Cypress 컴포넌트 테스트)를 활용하는 방법, 그리고 효과적인 컴포넌트 테스트 작성 전략에 대해 상세히 알아보겠습니다.

컴포넌트 테스트의 중요성

  • 독립적인 UI 검증: 컴포넌트가 다른 컴포넌트나 백엔드 의존성 없이 독립적으로 올바르게 동작하는지 확인합니다. 이는 복잡한 애플리케이션에서 특정 UI 문제가 발생했을 때 문제의 원인을 신속하게 파악하는 데 도움을 줍니다.
  • 시각적 회귀 방지: 컴포넌트의 props나 상태가 변경될 때, UI가 깨지거나 예상치 않게 변경되는 '시각적 회귀'를 방지합니다.
  • 재사용성 향상: 테스트 가능한 컴포넌트는 일반적으로 잘 정의된 인터페이스를 가지며, 이는 컴포넌트의 재사용성을 높이는 데 기여합니다.
  • 개발 속도 향상: 컴포넌트를 변경할 때마다 전체 애플리케이션을 실행하거나 브라우저에서 수동으로 확인하는 대신, 빠르고 자동화된 테스트를 통해 변경 사항의 영향을 즉시 확인할 수 있습니다.
  • 문서화 역할: 컴포넌트 테스트는 해당 컴포넌트가 어떤 props를 받고, 어떤 상태를 가지며, 어떻게 동작해야 하는지에 대한 '살아있는 문서' 역할을 합니다.

컴포넌트 테스트 도구 선택

Next.js에서 컴포넌트 테스트를 수행하는 데는 주로 두 가지 접근 방식이 있습니다.

  1. Jest + @testing-library/react (RTL)

    • 특징: Node.js 환경에서 JSDOM을 사용하여 브라우저 환경을 시뮬레이션합니다. 실제 브라우저가 아니므로 빠르지만, 실제 브라우저 환경과의 완벽한 일치는 어렵습니다. 사용자 상호작용과 DOM 변경에 중점을 둡니다.
    • 장점:
      • 매우 빠름.
      • 경량이며 설정이 비교적 간단.
      • 클라이언트 사이드 로직 및 UI 인터랙션 테스트에 적합.
    • 단점: 실제 브라우저가 아니므로 특정 브라우저 환경에서만 발생하는 레이아웃 문제, 스타일 문제 등을 잡아내기 어려울 수 있습니다.
    • 사용 시점: 대부분의 클라이언트 컴포넌트의 기능적 동작 및 사용자 상호작용 테스트.

  2. Cypress Component Testing

    • 특징: 실제 브라우저 환경에서 컴포넌트를 마운트하여 테스트합니다. E2E 테스트와 동일한 Cypress 러너와 API를 사용합니다.
    • 장점:
      • 실제 브라우저 환경에서 실행되므로, 스타일, 레이아웃, 반응형 디자인 등 시각적 측면까지 더 정확하게 테스트할 수 있습니다.
      • E2E 테스트와 동일한 워크플로우와 디버깅 경험을 제공.
      • 네트워크 모킹, 시간 제어 등 Cypress의 강력한 기능을 컴포넌트 레벨에서 활용 가능.
    • 단점: Jest/RTL에 비해 상대적으로 느릴 수 있습니다. 설정이 Jest보다 복잡할 수 있습니다.
    • 사용 시점: 시각적 정확성, 복잡한 CSS 상호작용, 또는 브라우저 특정 동작이 중요한 컴포넌트 테스트.

대부분의 경우 Jest와 RTL 조합이 컴포넌트 테스트에 가장 널리 사용되며 효율적입니다. Cypress 컴포넌트 테스트는 특정 시각적 또는 브라우저 관련 문제가 중요할 때 보완적으로 사용될 수 있습니다. 여기서는 Jest와 RTL을 중심으로 설명합니다.

Jest + @testing-library/react

14장 1절 "단위 테스트 설정 (Jest)"에서 Jest와 @testing-library/react의 설치 및 기본 설정(jest.config.js, jest.setup.js)은 이미 다루었습니다. 이 절에서는 실제 컴포넌트 테스트 예시를 통해 활용 방법을 심화합니다.

테스트할 컴포넌트 예시

버튼을 클릭하면 숫자가 증가/감소하는 간단한 카운터 컴포넌트를 테스트합니다.

components/Counter.tsx
// components/Counter.tsx
"use client"; // 클라이언트 컴포넌트

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);

  return (
    <div style={{ padding: '20px', border: '1px solid #00BCD4', borderRadius: '8px', textAlign: 'center' }}>
      <h2 style={{ color: '#00BCD4' }}>카운터</h2>
      <p style={{ fontSize: '2.5em', margin: '20px 0' }} data-testid="count-value">
        {count}
      </p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: '15px' }}>
        <button
          onClick={decrement}
          style={{ padding: '10px 20px', fontSize: '1.2em', backgroundColor: '#FF5722', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          감소
        </button>
        <button
          onClick={increment}
          style={{ padding: '10px 20px', fontSize: '1.2em', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
        >
          증가
        </button>
      </div>
    </div>
  );
}

Counter 컴포넌트 테스트 작성

__tests__/Counter.test.tsx
// __tests__/Counter.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react'; // RTL 유틸리티 임포트
import Counter from '../components/Counter'; // 테스트할 컴포넌트 임포트

describe('Counter 컴포넌트', () => {
  test('초기 카운트 값은 0이어야 합니다.', () => {
    render(<Counter />); // Counter 컴포넌트를 렌더링합니다.

    // data-testid로 요소를 찾고 텍스트 내용이 '0'인지 확인합니다.
    expect(screen.getByTestId('count-value')).toHaveTextContent('0');
  });

  test('증가 버튼 클릭 시 카운트 값이 1 증가해야 합니다.', () => {
    render(<Counter />);

    const incrementButton = screen.getByRole('button', { name: '증가' }); // '증가' 텍스트를 가진 버튼을 찾습니다.
    fireEvent.click(incrementButton); // 버튼 클릭 이벤트를 발생시킵니다.

    // 카운트 값이 '1'로 변경되었는지 확인합니다.
    expect(screen.getByTestId('count-value')).toHaveTextContent('1');
  });

  test('감소 버튼 클릭 시 카운트 값이 1 감소해야 합니다.', () => {
    render(<Counter />);

    const decrementButton = screen.getByRole('button', { name: '감소' }); // '감소' 텍스트를 가진 버튼을 찾습니다.
    fireEvent.click(decrementButton); // 버튼 클릭 이벤트를 발생시킵니다.

    // 카운트 값이 '-1'로 변경되었는지 확인합니다.
    expect(screen.getByTestId('count-value')).toHaveTextContent('-1');
  });

  test('증가 후 감소 버튼을 클릭하면 초기값으로 돌아와야 합니다.', () => {
    render(<Counter />);

    const incrementButton = screen.getByRole('button', { name: '증가' });
    const decrementButton = screen.getByRole('button', { name: '감소' });

    fireEvent.click(incrementButton); // 0 -> 1
    expect(screen.getByTestId('count-value')).toHaveTextContent('1');

    fireEvent.click(decrementButton); // 1 -> 0
    expect(screen.getByTestId('count-value')).toHaveTextContent('0');
  });
});

설명

  • render(<Component />): 컴포넌트를 JSDOM 환경에 렌더링하고, 렌더링된 컴포넌트와 상호작용할 수 있는 쿼리 함수들을 반환합니다.
  • screen: render 함수가 반환하는 객체 중 하나로, 렌더링된 DOM 요소에 접근하는 데 사용됩니다. screen 객체는 문서 전체에 대해 쿼리할 수 있도록 설계되어 있습니다.
  • 쿼리 함수: @testing-library/react는 컴포넌트의 내부 구현(state, props)이 아닌, 사용자가 화면에서 실제로 보고 상호작용하는 방식으로 요소를 찾는 다양한 쿼리 함수를 제공합니다.
    • getByRole(): 접근성 트리를 기반으로 요소를 찾습니다. 가장 권장되는 방법입니다 (예: button, heading, textbox).
    • getByText(): 텍스트 내용으로 요소를 찾습니다.
    • getByTestId(): data-testid 속성을 사용하여 요소를 찾습니다. 테스트 전용 속성이므로, 최종 제품 코드에는 영향을 주지 않으면서 테스트에서 특정 요소를 안정적으로 선택하는 데 유용합니다.
  • fireEvent.click(): 특정 요소에 클릭 이벤트를 발생시킵니다. fireEvent 외에도 user-event 라이브러리가 사용자 행동을 더 실제적으로 모방합니다 (예: user.type, user.click). npm install --save-dev @testing-library/user-event로 설치하여 사용할 수 있습니다.
  • expect().toHaveTextContent(), expect().toBeInTheDocument(): Jest의 매처와 @testing-library/jest-dom의 확장 매처를 사용하여 렌더링된 DOM 요소의 속성을 검증합니다.

컴포넌트 테스트 시 고려사항 및 팁

  • 테스트의 격리: 각 컴포넌트 테스트는 독립적이어야 합니다. 한 테스트의 결과가 다른 테스트에 영향을 주지 않도록 beforeEach나 afterEach 훅을 사용하여 상태를 초기화하거나 정리합니다.
  • 모킹 활용: 컴포넌트가 외부 API 호출, 전역 상태 관리(Redux, Zustand), Context API 등 외부 의존성을 가진다면, Jest의 모킹 기능을 사용하여 이러한 의존성을 격리합니다.
    • Context 모킹: MyContext.Provider를 테스트 렌더링 시 감싸서 모킹된 값을 제공합니다.
    • 훅 모킹: jest.mock()을 사용하여 특정 훅(예: useRouter)을 모킹하여 제어된 값을 반환하도록 합니다.
  • Server Components의 제한: Next.js의 Server Components는 클라이언트에서 실행되지 않으므로 @testing-library/react로 직접 테스트하기 어렵습니다. Server Components가 데이터를 가져와 클라이언트 컴포넌트에 props로 전달하는 패턴이라면, 클라이언트 컴포넌트를 테스트하면서 props로 전달되는 데이터를 모킹하는 방식으로 접근합니다.
  • CSS Modules/Tailwind CSS: Jest 환경에서 CSS Modules나 Tailwind CSS 클래스가 올바르게 처리되지 않을 수 있습니다. jest.config.js의 moduleNameMapper에 identity-obj-proxy를 사용하여 CSS 파일을 모킹해야 합니다.
    jest.config.js
    // jest.config.js (예시)
moduleNameMapper: {
  '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
},
  • 스냅샷 테스트 (Snapshot Testing): UI 컴포넌트의 스냅샷을 찍어 예상치 못한 UI 변경을 감지하는 데 사용할 수 있습니다. 하지만 너무 자주 변경되는 컴포넌트에는 적합하지 않으며, 테스트의 의도를 명확히 드러내기 어렵다는 단점이 있습니다. 보조적인 수단으로 활용하는 것이 좋습니다. 
    // Example: 스냅샷 테스트
import renderer from 'react-test-renderer'; // npm install --save-dev react-test-renderer
import MyComponent from '../components/MyComponent';

test('MyComponent matches snapshot', () => {
  const tree = renderer.create(<MyComponent prop1="value" />).toJSON();
  expect(tree).toMatchSnapshot(); // 첫 실행 시 스냅샷 생성, 이후 비교
});
  • 테스트 커버리지: Jest는 테스트 커버리지 보고서를 생성하는 기능을 제공합니다. 이를 통해 테스트되지 않은 코드 부분을 파악하고 테스트를 보강할 수 있습니다. (jest.config.js의 collectCoverage 옵션)

컴포넌트 테스트는 UI의 안정성과 사용자 경험을 보장하는 데 필수적인 부분입니다. @testing-library/react를 활용하여 사용자 관점에서 컴포넌트의 동작을 검증하고, Jest의 강력한 기능을 통해 효율적인 테스트 환경을 구축하세요.

E2E 테스트 구현

Previous Page

Vercel 배포 과정

Next Page