Jest - 테스트 프레임워크로 테스트 자동화를 쉽게 구현하기

1. Jest란?

Jest는 JavaScript 애플리케이션을 테스트하기 위한 강력하고 사용하기 쉬운 테스트 프레임워크이다.

Facebook에서 개발했으며, React와 같은 라이브러리뿐만 아니라 일반 JavaScript 프로젝트에서도 사용된다.

Jest는 테스트 작성, 실행, 디버깅을 간소화하며 단위 테스트(Unit Testing), 통합 테스트(Integration Testing), 엔드투엔드 테스트(End-to-End Testing)를 지원한다.

---

2. 주요 특징

1. 간단한 설정
   • 별도의 설정 없이 즉시 사용 가능.
2. 스냅샷 테스트
   • UI 컴포넌트가 이전 렌더링과 일치하는지 검사 가능.
3. Mocking 지원
   • 함수, 모듈, 타이머 등을 Mocking하여 독립적인 테스트 가능.
4. 병렬 테스트 실행
   • 멀티스레드를 사용하여 테스트를 병렬로 실행해 빠른 성능 제공.
5. 코드 커버리지 리포트
   • 테스트를 통해 얼마나 많은 코드가 실행되었는지 확인 가능.
6. TypeScript 지원
   • JavaScript뿐만 아니라 TypeScript 프로젝트에서도 쉽게 사용할 수 있음.

---

3. Jest 설치 및 설정

3.1 Jest 설치

Jest를 프로젝트에 설치하려면 다음 명령어를 사용한다.

npm install --save-dev jest

3.2 실행 스크립트 추가

package.json 파일에 Jest 실행 스크립트를 추가한다.

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

3.3 Jest 실행

다음 명령어로 Jest 테스트를 실행한다.

npm test

---

4. 기본 사용법

4.1 단위 테스트 작성

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require("./sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

위 코드는 sum 함수가 1과 2를 더했을 때 3을 반환하는지 테스트한다.

---

5. 주요 기능

5.1 Matcher 사용

Jest는 다양한 Matcher를 제공하여 테스트 결과를 검증할 수 있다.

test("toBe 사용 예제", () => {
  expect(2 + 2).toBe(4); // 정확한 값 비교
});

test("toEqual 사용 예제", () => {
  expect({ name: "Eunbi" }).toEqual({ name: "Eunbi" }); // 객체 비교
});

test("toBeTruthy 사용 예제", () => {
  expect(1).toBeTruthy(); // true로 평가되는 값
});

test("toContain 사용 예제", () => {
  expect([1, 2, 3]).toContain(2); // 배열 또는 문자열 내 포함 여부
});

---

5.2 Mocking

Mocking을 통해 의존성을 분리하여 독립적인 테스트를 수행할 수 있다.

test("mock function 사용 예제", () => {
  const mockFn = jest.fn((x) => x + 1);
  expect(mockFn(2)).toBe(3);
  expect(mockFn).toHaveBeenCalledWith(2); // 함수가 호출된 인자 검사
});

---

5.3 비동기 코드 테스트

비동기 작업을 테스트하려면 async/await 또는 .then()을 사용할 수 있다.

// fetchData.js
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Eunbi"), 1000);
  });
}
module.exports = fetchData;

// fetchData.test.js
const fetchData = require("./fetchData");

test("비동기 데이터 테스트", async () => {
  const data = await fetchData();
  expect(data).toBe("Eunbi");
});

---

5.4 스냅샷 테스트

스냅샷 테스트는 UI 컴포넌트의 변경 여부를 감지하는 데 사용된다.

import React from "react";
import renderer from "react-test-renderer";
import MyComponent from "./MyComponent";

test("스냅샷 테스트", () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

---

6. Jest와 TypeScript

Jest는 TypeScript를 지원하므로, TypeScript 프로젝트에서도 쉽게 통합할 수 있다.

6.1 TypeScript 설정

다음 패키지를 설치한다.

npm install --save-dev ts-jest @types/jest

6.2 Jest 설정 파일 추가

jest.config.js 파일을 생성하고 설정을 추가한다.

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node"
};

---

7. 장점과 단점

장점

1. 설정 없이 빠르게 시작 가능.
2. 풍부한 기능(Mock, Matcher, 스냅샷 테스트 등) 제공.
3. 병렬 실행으로 테스트 속도 향상.
4. 코드 커버리지 리포트 내장.
5. TypeScript와 완벽히 호환.

단점

1. 스냅샷 테스트가 많아질 경우 유지보수가 어려울 수 있음.
2. 대규모 프로젝트에서는 초기 설정이 필요할 수 있음.

---

8. Jest와 다른 테스트 프레임워크 비교

특징	Jest	Mocha	Jasmine
설치 및 설정	간단	설정 필요	간단
Mocking 지원	내장	외부 라이브러리 필요	내장
스냅샷 테스트	지원	미지원	미지원
TypeScript 호환성	뛰어남	뛰어남	보통

---

9. 정리

Jest는 JavaScript 및 TypeScript 애플리케이션에서 테스트를 자동화하기 위한 강력한 도구이다.

설정이 간단하고, 풍부한 기능을 제공하며, 다양한 유형의 테스트를 지원하므로 프론트엔드와 백엔드 모두에서 널리 사용된다.

테스트 작성 및 실행을 간소화하고 유지보수성을 높이고자 한다면 Jest는 최고의 선택이다.