[JavaScript] Jest로 유닛 테스트 작성하기

1. 테스트란 ?

테스트는 소프트웨어가 의도한 대로 동작하는지 확인하는 과정입니다.

코드를 작성한 후, 예상하지 못한 오류가 발생하지 않도록 검증하는 것이 테스트의 핵심 역할입니다.

소프트웨어 테스트는 목적과 범위에 따라 여러 가지로 나뉩니다

테스트 종류	정의	목적	특징	예시
유닛 테스트 (Unit Test)	프로그램의 가장 작은 단위(함수, 메서드)를 독립적으로 테스트.	특정 코드 블록이 올바르게 동작하는지 확인.	- 다른 코드나 외부 시스템에 의존하지 않고 독립적으로 실행. - 빠르게 실행되며, 작성이 간단.	두 숫자를 더하는 함수가 올바르게 결과를 반환하는지 확인.
통합 테스트 (Integration Test)	프로그램의 가장 작은 단위(함수, 메서드)를 독립적으로 테스트.	모듈 간 상호작용과 데이터 흐름을 검증.	- 각 모듈이 개별적으로는 잘 동작하지만, 서로 연결될 때 문제가 발생할 수 있음. - 외부 시스템과의 상호작용 포함.	사용자 데이터를 가져오기 위해 서버와 통신하는 기능 테스트.
기능 테스트 (Functional Test)	애플리케이션의 기능이 요구사항에 따라 작동하는지 확인.	사용자가 기대하는 특정 기능의 동작을 보장.	- 사용자 관점에서 테스트를 수행. - UI와 백엔드의 상호작용도 포함.	로그인 기능이 제대로 작동하는지 확인.
엔드 투 엔드 테스트 (E2E)	애플리케이션의 전체 워크플로우를 테스트.	사용자가 애플리케이션을 사용할 때 모든 기능이 정상적으로 작동하는지 확인.	- 실제 사용자 시나리오와 동일한 환경에서 테스트. - 브라우저 자동화 도구(Selenium, Cypress 등)를 사용.	사용자가 상품을 검색하고 장바구니에 추가한 후 결제까지 완료하는 과정 테스트.
회귀 테스트 (Regression Test)	새로운 코드 변경으로 인해 기존 기능이 깨지지 않았는지 확인.	코드 변경 후에도 기존 기능이 안정적으로 유지되는지 보장.	- 기존 테스트를 반복 실행. - 자동화 테스트 도구를 주로 사용.	새로운 기능 추가 후 기존 로그인 기능이 여전히 작동하는지 확인.
부하 테스트(Load Test)	시스템이 높은 트래픽이나 부하 상황에서도 안정적으로 동작하는지 확인.	성능 병목 현상을 파악하고, 시스템의 한계를 테스트.	- 대규모 사용자 요청을 시뮬레이션. - 서버 응답 시간과 처리량을 측정.	웹사이트가 1만 명의 동시 접속을 처리할 수 있는지 확인.

 

2. 테스트 코드

테스트 코드는 프로덕션 코드(실제 애플리케이션 코드)가 의도한 대로 동작하는지 검증하기 위해 작성된 코드입니다.

일반적으로 테스트 코드는 다음과 같은 구조를 가집니다.

1. 설정(Setup): 테스트에 필요한 환경을 준비.
2. 실행(Execution): 테스트 대상 코드를 실행.
3. 검증(Assertion): 실행 결과가 예상한 값과 일치하는지 확인.
4. 정리(Teardown): 테스트 환경을 초기 상태로 복구.

3. Jest란 무엇인가?

Jest는 Facebook에서 개발한 JavaScript 테스트 프레임워크로, 다음과 같은 장점을 가집니다.

• 간단한 설정: 별도의 복잡한 설정 없이 바로 사용 가능.
• 빠른 실행: 병렬 테스트 실행으로 속도가 빠름.
• 모의(Mock) 함수: 외부 의존성을 제거하고 독립적으로 테스트 가능.
• 스냅샷 테스트: UI 컴포넌트의 상태를 손쉽게 테스트.

3-1. Jest 설치

npm install --save-dev jest

 

💡 Tip: --save-dev는 Jest를 개발 환경에서만 사용한다는 의미입니다.

 

3-2. 테스트 스크립트 추가

package.json 파일에 다음과 같이 테스트 스크립트를 추가합니다.

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

4. Jest로 유닛 테스트 작성하기

4.1 테스트할 함수 작성

테스트할 간단한 함수를 작성해봅시다.

예를 들어, 두 숫자를 더하거나 빼는 함수를 만들어보겠습니다.

 

math.js 파일

// 두 숫자를 더하는 함수
function add(a, b) {
    return a + b;
}

// 두 숫자를 빼는 함수
function subtract(a, b) {
    return a - b;
}

// 여러 곳에서 사용할 수 있도록 함수들을 내보냅니다.
module.exports = { add, subtract };

 

4.2 테스트 코드 작성

이제 위에서 작성한 add와 subtract 함수를 테스트하는 코드를 작성합니다.

math.test.js 파일

// math.js에서 작성한 함수들을 가져옵니다.
const { add, subtract } = require('./math');

// add 함수 테스트
test('add 함수는 두 숫자의 합을 반환한다', () => {
    // add 함수가 1과 2를 더했을 때 3을 반환하는지 확인
    expect(add(1, 2)).toBe(3);

    // 음수를 더했을 때도 올바른 결과를 반환하는지 확인
    expect(add(-1, -1)).toBe(-2);
});

// subtract 함수 테스트
test('subtract 함수는 두 숫자의 차를 반환한다', () => {
    // subtract 함수가 5에서 3을 뺐을 때 2를 반환하는지 확인
    expect(subtract(5, 3)).toBe(2);

    // 0에서 5를 뺐을 때 -5를 반환하는지 확인
    expect(subtract(0, 5)).toBe(-5);
});

 

4.3 테스트 실행

터미널에서 다음 명령어를 실행하여 테스트를 실행합니다.

npm test

 

결과는 다음과 같이 표시됩니다.

 PASS  ./math.test.js
  ✓ add 함수는 두 숫자의 합을 반환한다 (5ms)
  ✓ subtract 함수는 두 숫자의 차를 반환한다 (3ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.5s