React에서 Jest로 유닛 테스트하기

 

React 애플리케이션에서 코드를 안정적으로 유지하고 예기치 않은 오류를 방지하기 위해 유닛 테스트는 필수적입니다. 특히, Jest는 React와 함께 많이 사용되는 테스트 프레임워크로, 간단한 설정과 다양한 기능으로 개발자들에게 사랑받고 있습니다. 이번 글에서는 Jest를 사용해 React 컴포넌트와 함수의 유닛 테스트를 작성하는 방법을 단계별로 알아보겠습니다.

---

1. Jest란 무엇인가요?

Jest는 Facebook에서 개발한 JavaScript 테스팅 프레임워크로, React 프로젝트에서 유닛 테스트와 스냅샷 테스트를 손쉽게 구현할 수 있도록 설계되었습니다. Jest의 주요 특징은 다음과 같습니다:

• 간단한 설정: React 프로젝트에서 바로 사용할 수 있습니다.
• 빠른 실행 속도: 테스트 실행 시 이전 결과를 캐싱해 빠르게 테스트를 수행합니다.
• 다양한 매칭 함수: 다양한 조건을 쉽게 검증할 수 있습니다.
• 스냅샷 테스트 지원: UI 변경 여부를 쉽게 확인할 수 있습니다.

---

2. Jest 설치 및 초기 설정

Jest를 React 프로젝트에서 사용하려면 먼저 Jest와 관련된 패키지를 설치해야 합니다.

1. Jest 설치
   React 프로젝트 디렉토리에서 아래 명령어를 실행하세요:
2. npm install --save-dev jest @testing-library/react @testing-library/jest-dom
3. 스크립트 추가
   package.json 파일에 Jest 실행 스크립트를 추가합니다:
4. "scripts": { "test": "jest" }
5. Jest 설정 파일(optional)
   Jest 설정을 세부적으로 조정하려면 프로젝트 루트에 jest.config.js 파일을 생성하세요:
6. module.exports = { testEnvironment: 'jsdom', moduleNameMapper: { '\\.(css|less|scss)$': 'identity-obj-proxy' } };

---

3. React 컴포넌트 테스트 작성하기

아래 예제를 통해 간단한 React 컴포넌트를 Jest로 테스트하는 방법을 알아보겠습니다.

컴포넌트: Counter.js

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

테스트 파일: Counter.test.js

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

describe('Counter Component', () => {
  test('renders initial count', () => {
    render(<Counter />);
    expect(screen.getByText(/Count: 0/i)).toBeInTheDocument();
  });

  test('increments count on "Increment" button click', () => {
    render(<Counter />);
    const incrementButton = screen.getByText(/Increment/i);
    fireEvent.click(incrementButton);
    expect(screen.getByText(/Count: 1/i)).toBeInTheDocument();
  });

  test('decrements count on "Decrement" button click', () => {
    render(<Counter />);
    const decrementButton = screen.getByText(/Decrement/i);
    fireEvent.click(decrementButton);
    expect(screen.getByText(/Count: -1/i)).toBeInTheDocument();
  });
});

설명:

• render: 컴포넌트를 가상 DOM에 렌더링합니다.
• screen.getByText: 특정 텍스트를 포함하는 DOM 요소를 찾습니다.
• fireEvent.click: 특정 요소에 클릭 이벤트를 발생시킵니다.
• expect(...).toBeInTheDocument(): 요소가 DOM에 존재하는지 확인합니다.

---

4. 함수 유닛 테스트 작성하기

Jest는 React 컴포넌트뿐만 아니라 일반 함수의 테스트에도 유용합니다.

함수: sum.js

export function sum(a, b) {
  return a + b;
}

테스트 파일: sum.test.js

import { sum } from './sum';

describe('sum function', () => {
  test('adds two numbers correctly', () => {
    expect(sum(1, 2)).toBe(3);
    expect(sum(-1, -2)).toBe(-3);
  });

  test('handles zero correctly', () => {
    expect(sum(0, 0)).toBe(0);
    expect(sum(5, 0)).toBe(5);
  });
});

설명:

• describe: 관련 테스트를 그룹화합니다.
• test: 개별 테스트 케이스를 정의합니다.
• expect(...).toBe(...): 실제 결과와 기대값이 일치하는지 확인합니다.

---

5. 스냅샷 테스트

스냅샷 테스트는 컴포넌트의 출력이 변경되었는지 확인할 때 유용합니다.

컴포넌트: Header.js

import React from 'react';

export default function Header() {
  return <h1>Welcome to My App</h1>;
}

테스트 파일: Header.test.js

import React from 'react';
import { render } from '@testing-library/react';
import Header from './Header';

test('renders Header correctly', () => {
  const { container } = render(<Header />);
  expect(container).toMatchSnapshot();
});

이 테스트를 실행하면 __snapshots__ 디렉토리에 스냅샷 파일이 생성됩니다. 이후 컴포넌트가 변경되면 테스트에서 스냅샷 차이를 경고합니다.

---

6. 테스트 실행

테스트를 실행하려면 아래 명령어를 사용하세요:

npm test

결과:

• 모든 테스트가 성공하면 초록색으로 결과가 표시됩니다.
• 실패한 테스트가 있으면 실패한 이유와 위치를 명확히 알려줍니다.

---

7. 정리 및 팁

• TDD(Test-Driven Development): 코드를 작성하기 전에 테스트를 먼저 작성하면 안정성을 높일 수 있습니다.
• 커버리지 확인: npm test -- --coverage 명령어를 사용해 테스트 커버리지를 확인하세요.
• 모듈화된 테스트: 컴포넌트별, 기능별로 테스트 파일을 분리해 관리하면 효율적입니다.

---

React 애플리케이션에서 Jest를 사용하면 유닛 테스트를 효율적으로 작성하고 유지할 수 있습니다. Jest의 강력한 기능을 활용해 애플리케이션의 안정성과 신뢰성을 높여보세요!