단위 테스트 (Jest 사용)

우리는 9장에서 Fetch API, 웹 스토리지, History API, Canvas API, 웹/서비스 워커까지 다루며 동적인 웹 애플리케이션을 만드는 방법을 익혔습니다.

이제 단순 기능 구현을 넘어서 안정성을 확보할 단계입니다.

관건은 여기서부터입니다.

코드 규모가 커질수록 의도대로 동작하는지를 눈으로 확인하기 어려워집니다.

기능 하나를 고치면 다른 부분이 깨지는 사이드 이펙트도 자주 생깁니다.

이 문제를 예방하는 핵심 도구가 테스팅(Testing)입니다.

10장 테스팅과 디버깅에서는 코드 품질을 체계적으로 검증하는 방법을 다룹니다.

첫 주제는 가장 작은 단위를 검증하는 단위 테스트(Unit Testing)와 대표 도구인 Jest입니다.

웹 개발에서 코드가 잘 작동한다는 것은 에러가 없다는 뜻만이 아닙니다.

계산 함수라면 같은 입력에 같은 결과를 반환해야 하고, 상태를 바꾸는 함수라면 약속한 상태 변화만 일으켜야 합니다. 현재 시각이나 서버 응답에 의존하는 코드는 그 조건도 테스트에서 통제해야 합니다.

단위 테스트는 함수, 메서드, 작은 모듈을 독립적으로 검사합니다.

그래서 문제가 생겼을 때 원인을 빠르게 좁힐 수 있고, 수정 이후 회귀 버그를 줄이는 데 큰 도움이 됩니다.

이번 장에서는 자바스크립트 생태계에서 폭넓게 사용되는 Jest 테스트 프레임워크로 단위 테스트를 작성하는 방법을 배웁니다.

함수의 반환값, import/export, 배열·객체 비교, throw, Promise와 async/await를 알고 있으면 예제를 따라갈 수 있습니다. 회귀 버그는 이전에 되던 동작이 수정 후 깨지는 문제이고, 단언(assertion)은 실제 결과가 기대 결과를 만족하는지 판정하는 문장입니다. 기대값은 구현을 그대로 복사해 계산하지 말고 요구사항이나 손으로 계산한 결과에서 정합니다.

Jest 설치 및 기본 설정

Jest를 사용하기 위해서는 먼저 프로젝트에 Jest를 설치해야 합니다.

이 절은 Jest 30을 지원하는 Node.js와 npm이 있는 별도 연습 폴더를 전제로 합니다. 이 교재 저장소에 Jest가 이미 구성되어 있다는 뜻은 아닙니다. 실습용 package.json에는 "type": "module"을 넣지 않고, Babel로 아래 ES 모듈 문법을 CommonJS로 변환합니다. 기존 프로젝트에 적용할 때는 그 프로젝트의 모듈·테스트 설정부터 확인합니다.

npm init -y

npm install --save-dev jest@30
# 또는 yarn add --dev jest@30

{
  "name": "my-js-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watchAll"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^30.0.0"
  }
}

npm install --save-dev babel-jest@30 @babel/core @babel/preset-env

// babel.config.cjs
module.exports = {
    presets: [["@babel/preset-env", { targets: { node: "current" } }]],
};

첫 번째 단위 테스트 작성하기

간단한 함수를 만들고, 이 함수가 올바르게 작동하는지 Jest를 이용해 테스트해 보겠습니다.

여기서는 두 입력을 유한한 number 값으로 제한합니다. 문자열 변환이나 잘못된 타입을 거부하는 기능은 아직 구현하지 않습니다. 예를 들어 add("1", 2)는 이 계약 밖이므로 그 결과만 보고 숫자 덧셈 테스트가 충분하다고 판단하지 않습니다.

// src/math.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

export function multiply(a, b) {
    return a * b;
}

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

// src/math.test.js
import { add, subtract, multiply, divide } from './math'; // 테스트할 함수들을 임포트

// describe 블록: 관련 테스트들을 그룹화 (테스트 스위트)
describe('수학 함수 테스트', () => {

    // test 또는 it 블록: 개별 테스트 케이스
    test('add 함수는 두 숫자를 더해야 한다', () => {
        // expect(): 테스트할 값 (subject)
        // toBe(): Jest의 매처(Matcher). 예상 값과 실제 값을 비교
        expect(add(1, 2)).toBe(3);
        expect(add(0, 0)).toBe(0);
        expect(add(-1, 1)).toBe(0);
        expect(add(10, -5)).toBe(5);
    });

    test('subtract 함수는 첫 번째 숫자에서 두 번째 숫자를 빼야 한다', () => {
        expect(subtract(5, 2)).toBe(3);
        expect(subtract(2, 5)).toBe(-3);
        expect(subtract(0, 0)).toBe(0);
    });

    test('multiply 함수는 두 숫자를 곱해야 한다', () => {
        expect(multiply(2, 3)).toBe(6);
        expect(multiply(5, 0)).toBe(0);
        expect(multiply(-2, 4)).toBe(-8);
    });

    // 특정 예외(에러)가 발생하는지 테스트
    test('divide 함수는 0으로 나눌 때 에러를 발생시켜야 한다', () => {
        // toThrow(): 특정 에러가 발생하는지 확인하는 매처
        expect(() => divide(10, 0)).toThrow('0으로 나눌 수 없습니다.');
    });

    test('divide 함수는 두 숫자를 나눠야 한다', () => {
        expect(divide(10, 2)).toBe(5);
        expect(divide(7, 2)).toBe(3.5);
    });
});

npm test

Jest의 주요 매처(Matchers)

expect(value).toBe(expected)와 같이 expect() 뒤에 체이닝되는 메서드를 매처(Matcher)라고 합니다.

Jest는 다양한 매처를 제공하여 여러 가지 방법으로 값을 비교하고 검증할 수 있도록 합니다.

객체 내용이 같은지와 같은 객체인지는 구별합니다. toBe는 참조도 비교하지만 toEqual은 내용을 비교합니다. 소수 계산에는 이진 부동소수점 오차가 있으므로 아래처럼 toBeCloseTo로 허용 정밀도를 명시합니다. 기본 정밀도 2는 보통 차이가 0.005보다 작은지를 판정합니다. 돈을 계산하는 앱의 반올림·허용 오차 규칙은 별도로 정해야 합니다. Jest 매처 안내

test('소수의 합은 허용 정밀도로 비교한다', () => {
    expect(add(0.1, 0.2)).toBeCloseTo(0.3, 2);
});

// src/data.js
export const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

export function getUserById(id) {
    return users.find(user => user.id === id);
}

// src/data.test.js
import { users, getUserById } from './data';

describe('사용자 데이터 테스트', () => {
    test('users 배열은 3명의 사용자를 포함해야 한다', () => {
        expect(users).toHaveLength(3);
    });

    test('users 배열은 Bob 사용자를 포함해야 한다', () => {
        // 객체는 toEqual로 깊은 비교
        expect(users).toContainEqual({ id: 2, name: 'Bob' });
    });

    test('getUserById는 올바른 사용자 객체를 반환해야 한다', () => {
        const user = getUserById(1);
        expect(user).toEqual({ id: 1, name: 'Alice' });
    });

    test('getUserById는 존재하지 않는 ID에 대해 undefined를 반환해야 한다', () => {
        const user = getUserById(99);
        expect(user).toBeUndefined();
    });
});

테스트 훅 (Hooks)

테스트 스위트(describe 블록) 내의 각 테스트 케이스(test 블록)가 실행되기 전이나 후에 특정 코드를 실행해야 할 때가 있습니다.

예를 들어, 각 테스트마다 동일한 초기 상태를 설정하거나, 테스트 후 정리 작업을 수행할 때 유용합니다.

Jest는 이를 위한 훅(Hook)을 제공합니다.

• beforeAll(fn, timeout): 현재 describe 블록 내의 모든 테스트가 시작되기 전에 한 번 실행됩니다.
• afterAll(fn, timeout): 현재 describe 블록 내의 모든 테스트가 끝난 후에 한 번 실행됩니다.
• beforeEach(fn, timeout): 현재 describe 블록 내의 각 테스트가 실행되기 전에 매번 실행됩니다.
• afterEach(fn, timeout): 현재 describe 블록 내의 각 테스트가 끝난 후에 매번 실행됩니다.

// src/calculator.js
export class Calculator {
    constructor() {
        this.value = 0;
    }

    add(num) {
        this.value += num;
    }

    subtract(num) {
        this.value -= num;
    }

    clear() {
        this.value = 0;
    }
}

// src/calculator.test.js
import { Calculator } from './calculator';

describe('Calculator 클래스 테스트', () => {
    let calculator; // 각 테스트마다 새로운 계산기 인스턴스를 생성할 변수

    // 각 테스트가 시작되기 전에 실행 (초기화)
    beforeEach(() => {
        calculator = new Calculator();
        console.log('Calculator 인스턴스 초기화됨');
    });

    // 각 테스트가 끝난 후에 실행 (정리)
    afterEach(() => {
        console.log('테스트 후 정리 (만약 필요하다면)');
    });

    test('add 메서드는 값을 올바르게 더해야 한다', () => {
        calculator.add(5);
        expect(calculator.value).toBe(5);
        calculator.add(10);
        expect(calculator.value).toBe(15);
    });

    test('subtract 메서드는 값을 올바르게 빼야 한다', () => {
        calculator.add(10); // beforeEach에서 초기화된 값에 10을 더함
        calculator.subtract(3);
        expect(calculator.value).toBe(7);
    });

    test('clear 메서드는 값을 0으로 초기화해야 한다', () => {
        calculator.add(100);
        calculator.clear();
        expect(calculator.value).toBe(0);
    });
});

이 예제는 beforeEach에서 새 계산기를 만들어 계산기 상태를 테스트마다 분리합니다. 공유 전역 상태나 외부 자원은 별도로 초기화·정리해야 합니다.

afterEach의 로그 출력 자체가 정리 작업은 아닙니다. 이 계산기는 외부 자원을 만들지 않으므로 별도 해제가 필요 없지만, 실제 테스트에서 연 타이머·파일·연결은 필요한 정리 코드를 작성해야 합니다. 파일 최상위의 훅은 파일 안의 테스트에, describe 안의 훅은 그 그룹의 테스트에 적용됩니다. 비동기 준비·정리는 훅에서도 Promise를 반환하거나 await해야 합니다. Jest setup·teardown 안내

예를 들어, 한 테스트에서 calculator.value를 변경해도 다음 테스트에는 영향을 주지 않습니다.

비동기 코드 테스트

웹 개발에서는 서버와의 통신이나 시간 지연을 포함하는 비동기 코드를 테스트하는 것이 매우 중요합니다.

Jest는 비동기 코드 테스트를 위한 여러 방법을 제공합니다.

아래 fetchData는 이름과 달리 실제 HTTP 요청을 보내지 않는 타이머 기반 연습 함수입니다. 따라서 성공·실패 분기와 Promise의 완료를 검증하며, 서버·네트워크의 동작은 검증하지 않습니다. 100은 타이머에 요청한 지연으로, 정확히 100ms에 끝난다는 보장은 아닙니다.

// src/api.js
export function fetchData(shouldSucceed) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (shouldSucceed) {
                resolve({ data: '데이터 로드 성공!' });
            } else {
                reject(new Error('데이터 로드 실패!'));
            }
        }, 100); // 0.1초 지연
    });
}

// src/api.test.js
import { fetchData } from './api';

describe('비동기 데이터 fetch 테스트', () => {
    test('fetchData는 성공적으로 데이터를 가져와야 한다', () => {
        // resolves: Promise가 성공적으로 이행되는지 확인
        return expect(fetchData(true)).resolves.toEqual({ data: '데이터 로드 성공!' });
    });

    test('fetchData는 에러를 반환해야 한다', () => {
        // rejects: Promise가 에러로 거부되는지 확인
        return expect(fetchData(false)).rejects.toThrow('데이터 로드 실패!');
    });
});

// src/api.test.js (async/await 버전)
import { fetchData } from './api';

describe('비동기 데이터 fetch 테스트 (async/await)', () => {
    test('fetchData는 성공적으로 데이터를 가져와야 한다 (async/await)', async () => {
        const data = await fetchData(true);
        expect(data).toEqual({ data: '데이터 로드 성공!' });
    });

    test('fetchData는 에러를 반환해야 한다 (async/await)', async () => {
        // rejects 매처로 Promise 거부와 오류 메시지를 검증
        await expect(fetchData(false)).rejects.toThrow('데이터 로드 실패!');

        // 또는
        // try {
        //     await fetchData(false);
        // } catch (e) {
        //     expect(e.message).toBe('데이터 로드 실패!');
        // }
    });
});

직접 판정해 보기

1. Calculator를 새로 만든 뒤 add(4), subtract(6), clear()를 차례로 실행합니다. 마지막 값만 검사할 때 놓칠 수 있는 버그를 생각하고, 각 단계의 기대값을 먼저 적어 테스트를 작성하세요.
2. getUserById('1')의 기대값을 정하세요. 숫자 1과 문자열 '1'을 같은 ID로 받을 요구사항이 아직 없다는 조건입니다.
3. 위 성공 Promise 테스트에서 return을 지우고 기대값을 틀리게 적었다고 가정합니다. PASS가 보이더라도 신뢰할 수 없는 이유와 수정 방법을 설명하세요.

test('계산과 초기화는 단계별 계약을 만족한다', () => {
    const calculator = new Calculator();
    calculator.add(4);
    expect(calculator.value).toBe(4);
    calculator.subtract(6);
    expect(calculator.value).toBe(-2);
    calculator.clear();
    expect(calculator.value).toBe(0);
});

단위 테스트 정리

정리 구간에서는 테스트 케이스 수보다 실패 원인을 빠르게 드러내는 단언 구조를 우선 점검합니다.

이번 장에서는 코드의 안정성과 신뢰성을 높이는 데 필수적인 단위 테스트(Unit Testing)의 개념과, 이를 구현하기 위한 강력한 자바스크립트 테스트 프레임워크인 Jest의 사용법을 심도 있게 학습했습니다.

Jest 설치, package.json 스크립트 설정, describe/test/it 블록 구성, expect().toBe(), toEqual(), toThrow() 같은 매처 사용법을 확인했습니다.

beforeEach, afterEach 같은 테스트 훅과 Promise, async/await 기반 비동기 코드 테스트도 함께 다뤘습니다.

단위 테스트는 회귀 버그를 줄이고 리팩터링의 기준을 제공합니다.

모든 기능을 한 번에 테스트하려 하기보다 계산 로직, 상태 변경, 예외 처리처럼 결과가 명확한 핵심 로직부터 테스트 대상으로 삼는 것이 좋습니다.

단위 테스트를 작성할 때는 구현 세부를 많이 붙잡기보다 작은 입력과 명확한 기대값을 먼저 고정해야 합니다.