78. 자바스크립트 Jest 사용법 (Using Jest)

Jest 사용법 (Using Jest)

자바스크립트에서 테스트를 쉽게 작성하고 관리하려면 Jest가 훌륭한 도구로 자리잡고 있다. Jest는 간단한 설정과 강력한 기능으로 코드의 신뢰성을 높여준다. 이번에는 Jest의 기본 사용법부터 심화된 기능까지 코드와 함께 자세히 풀어보려고 한다.

Jest를 잘 활용하면 테스트 과정을 단순화하고, 코드 품질을 한층 끌어올릴 수 있다. 단계별로 하나씩 알아보자.

Jest란 무엇인가

Jest는 Facebook에서 만든 오픈소스 테스트 프레임워크로, 설정이 거의 필요 없고 빠르게 시작할 수 있다. 기본적으로 단위 테스트를 지원하며, 스냅샷 테스트, 모킹 같은 기능도 제공한다:

// 설치: npm install --save-dev jest
function sum(a, b) {
    return a + b;
}

module.exports = sum;

간단한 함수를 작성한 후, 이를 테스트해보자.

1. 첫 번째 Jest 테스트 작성

Jest로 테스트 파일을 만들고 실행해보자:

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

test("2와 3을 더하면 5가 된다", () => {
    expect(sum(2, 3)).toBe(5);
});

test("0과 0을 더하면 0이 된다", () => {
    expect(sum(0, 0)).toBe(0);
});

package.json에 스크립트를 추가하고 실행한다:

// package.json
{
    "scripts": {
        "test": "jest"
    }
}
// 실행: npm test

expect와 toBe로 기대값과 실제 값을 비교했다. 테스트가 통과하면 결과를 콘솔에서 확인할 수 있다.

2. 비동기 코드 테스트

Jest는 비동기 함수도 쉽게 다룰 수 있다:

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("데이터"), 1000);
    });
}

test("1초 후 데이터를 반환한다", async () => {
    const data = await fetchData();
    expect(data).toBe("데이터");
});

async/await를 사용해 비동기 결과를 기다린 후 검증했다.

3. 모킹(Mocking)으로 의존성 제어

Jest의 모킹 기능을 활용해 외부 의존성을 대체해보자:

// user.js
const axios = require("axios");

async function getUser() {
    const response = await axios.get("https://api.example.com/user");
    return response.data;
}

module.exports = getUser;

// user.test.js
const getUser = require("./user");
const axios = require("axios");
jest.mock("axios");

test("사용자 데이터를 가져온다", async () => {
    axios.get.mockResolvedValue({ data: "가짜 유저" });
    const result = await getUser();
    expect(result).toBe("가짜 유저");
});

jest.mock과 mockResolvedValue로 실제 네트워크 요청 없이 테스트를 진행했다.

4. 스냅샷 테스트

Jest의 스냅샷 테스트로 UI나 데이터 구조를 확인해보자:

function renderUser(name, age) {
    return { name, age };
}

test("유저 객체가 예상대로 렌더링된다", () => {
    const user = renderUser("홍길동", 30);
    expect(user).toMatchSnapshot();
});

첫 실행 시 스냅샷이 생성되고, 이후 변경 사항을 감지한다.

5. 에러 처리 테스트

에러가 발생하는 상황을 테스트해보자:

function divide(a, b) {
    if (b === 0) throw new Error("0으로 나눌 수 없다");
    return a / b;
}

test("0으로 나누면 에러가 발생한다", () => {
    expect(() => divide(5, 0)).toThrow("0으로 나눌 수 없다");
});

test("정상적인 나눗셈은 결과를 반환한다", () => {
    expect(divide(6, 2)).toBe(3);
});

toThrow로 에러를 검증하고, 정상 동작도 확인했다.

6. 매처(Matchers) 활용

Jest는 다양한 매처를 제공한다:

function getItems() {
    return [1, 2, 3];
}

test("배열과 객체를 테스트한다", () => {
    expect(getItems()).toContain(2);
    expect(getItems()).toHaveLength(3);
    expect(5).toBeGreaterThan(3);
    expect("hello").toMatch(/ell/);
});

toContain, toHaveLength 등으로 조건을 다양하게 검증했다.

7. 설정 커스터마이징

Jest 설정을 변경해 테스트 환경을 조정해보자:

// jest.config.js
module.exports = {
    testEnvironment: "node",
    verbose: true,
    testMatch: ["**/*.test.js"]
};

환경을 Node로 설정하고, 자세한 로그를 출력하도록 했다.

8. 커버리지 확인

Jest로 코드 커버리지를 측정해보자:

// package.json
{
    "scripts": {
        "test": "jest --coverage"
    }
}

// sum.js
function sum(a, b) {
    if (a > 0) {
        return a + b;
    }
    return 0;
}

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

test("양수일 때 더한다", () => {
    expect(sum(2, 3)).toBe(5);
});

--coverage 옵션으로 실행하면, 테스트가 덮지 못한 분기(여기서는 음수 조건)를 알려준다.

9. 성능과 편의성에 미치는 영향

Jest가 테스트에 어떤 영향을 주는지 보자:

- 성능: 병렬 실행으로 빠르게 처리되며, 캐싱으로 반복 실행 속도가 빨라진다.

- 편의성: 설정이 간단하고, 풍부한 API로 테스트 작성이 직관적이다.

expect와 모킹으로 복잡한 로직도 쉽게 검증할 수 있는 점이 핵심이다.

마무리

Jest는 테스트 작성을 단순화하면서도 강력한 기능을 제공한다. 기본 테스트부터 비동기, 모킹, 스냅샷, 커버리지까지 다채롭게 활용할 수 있다.