Jest 사용법 완전 정복 리액트 테스트의 핵심 도구

Jest란?

• JavaScript 테스트 프레임워크
• Facebook에서 개발 & 리액트 프로젝트에 최적화
• 빠른 속도, 풍부한 기능, 쉬운 설정이 장점
• 테스트 러너 + assertion + mock 기능을 한 번에 제공

설치 방법

1. Create React App 프로젝트라면?

CRA는 이미 Jest가 내장돼 있어 별도 설치 필요 없음.

2. 직접 설치하려면?

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

 

또는 TypeScript 사용 시:

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

---

기본 설정 (필요한 경우)

 

package.json에 설정 추가:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "testEnvironment": "jsdom"
  }
}

1.기본 테스트 작성 예제

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

// sum.test.js
import { sum } from "./sum";

test("1 + 2는 3이다", () => {
  expect(sum(1, 2)).toBe(3);
});

 

 

2. 리액트 컴포넌트 테스트

// Button.jsx
export default function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

// Button.test.jsx
import { render, screen, fireEvent } from "@testing-library/react";
import Button from "./Button";

test("버튼 클릭 시 이벤트가 발생한다", () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick} />);
  fireEvent.click(screen.getByText("Click Me"));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

---

유용한 Jest 매처들

매처

toBe()	정확한 값 비교
toEqual()	객체/배열 비교
toBeTruthy() / toBeFalsy()	참/거짓 여부 확인
toHaveBeenCalled()	mock 함수 호출 여부
toContain()	배열에 특정 항목 포함 여부
toThrow()	예외 발생 여부 확인

 

폴더 구조 & 파일 네이밍

src/
 └─ utils/
      └─ sum.js
      └─ __tests__/sum.test.js

테스트 실행 명령어

npm test

특정 테스트만 실행

npm test sum

테스트 자동 재실행

npm test -- --watch

 

테스트 중 특정 테스트만 실행하고 싶다면?

test.only("이 테스트만 실행된다", () => {
  expect(true).toBe(true);
});

test.skip("이 테스트는 건너뜀", () => {
  expect(false).toBe(true);
});

 

목(Mock) 함수

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

expect(mockFn).toHaveBeenCalled();      // 호출됐는가
expect(mockFn).toHaveBeenCalledWith("hello"); // 인자로 "hello" 받았는가