Published on

13단계: Jest 테스트

13-1. 테스트의 필요성

코드의 안정성을 보장하고 리팩토링 시 버그를 사전에 방지하기 위해 테스트는 필수입니다.
Jest는 Facebook이 만든 JavaScript 테스트 프레임워크로, React와 매우 잘 통합됩니다.

13-2. Jest 설치

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

package.json에 다음 스크립트 추가:

"scripts": {
  "test": "jest"
}

13-3. 기본 테스트 구조

test("2 + 2는 4", () => {
  expect(2 + 2).toBe(4);
});

expect()와 matcher 조합으로 다양한 검증 가능:

  • .toBe()
  • .toEqual()
  • .toHaveLength()
  • .toContain()

13-4. React 컴포넌트 테스트

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

test("인사 문구가 렌더링되는가", () => {
  render(<Greeting name="철수" />);
  expect(screen.getByText(/철수님 반갑습니다/)).toBeInTheDocument();
});

13-5. 사용자 이벤트 테스트

import userEvent from '@testing-library/user-event';

test("버튼 클릭 시 증가", () => {
  render(<Counter />);
  const button = screen.getByRole('button');
  userEvent.click(button);
  expect(screen.getByText("1")).toBeInTheDocument();
});

13-6. 비동기 처리 테스트

test("API 로딩 후 데이터 표시", async () => {
  render(<UserList />);
  expect(await screen.findByText("홍길동")).toBeInTheDocument();
});

13-7. Mock 함수 활용

const mockFn = jest.fn();
mockFn("hello");
expect(mockFn).toHaveBeenCalledWith("hello");

요약

  • Jest는 React 테스트를 위한 대표적인 프레임워크
  • 단위 테스트, 컴포넌트 렌더링, 이벤트 처리, 비동기 요청 모두 검증 가능
  • @testing-library/react는 사용자 관점의 테스트를 쉽게 지원
  • Mock 함수를 통해 외부 함수나 API 호출을 시뮬레이션 가능

심화학습

Q1. screen.getByText와 findByText의 차이는 무엇인가요?
A1. getBy는 동기 방식으로 즉시 DOM에서 찾고, findBy는 비동기 방식으로 일정 시간 기다리며 찾습니다.

Q2. React 컴포넌트 테스트에서 props에 따라 조건부 렌더링되는 컴포넌트는 어떻게 검증하나요?
A2. 서로 다른 props로 여러 케이스를 테스트하고, 특정 요소가 있는지/없는지를 queryBy, getBy 등으로 확인합니다.

Q3. 비동기 로직 테스트에서 가장 흔한 실수는 무엇인가요?
A3. await를 쓰지 않고 getByText만 쓰는 경우 로딩 상태를 확인 못하고 테스트가 실패합니다. findBy를 써야 합니다.