김데이의 개발공부

[ TIL ] Day 81 - JEST 프레임워크 사용법 1 본문

코드잇 Node.js(BE) 부트 캠프/TIL (Today I Learn) 📑

[ TIL ] Day 81 - JEST 프레임워크 사용법 1

theday365 2026. 1. 20. 19:04
반응형

🗓️ 수업 일자 : 2026.1.20

✨ 오늘의 수업 평가  [ GOOD ]    머리가 터질 뻔했지만 배웠다 💥🤯📚

 

무한 루프 돌아서 에러 찾느라 애먹었지만, 오전에 실기 작업 겨우 끝냈다 ㅋㅋ 

오후에는 강의 시간이었는데 TEST를 쉽게 하는 줄 알았것만 어째 더 어려워지는 느낌이다 ㅋㅋㅋㅋㅋㅋㅋㅋ

그래도 매번 필요할 때마다 중구난방으로 테스트 했었는데,

체계적으로 테스트 할 수 있다고 해서 솔깃해 지는 수업이었다 !!

(마지막 테스트 더블은 아직도 좀 헷갈리지만..ㅎㅎ)

 

👩‍💻 [개인 / 팀 프로젝트] 오늘 작업 내용 💻
- 알림 관련 API 테스트 

- 최종 제출

 

📝  오늘 배운 내용  

- 테스트 프레임 워크 [ JEST ]

- JEST 사용하기 

- JEST 문법

 


1. 테스트 프레임 워크 [ JEST ]

JEST : 항상 동일한 형식의 테스트를 구성하여, 동일한 수준의 서비스를 제공 가능

  • 코드 리팩토링 이후 기존 서비스와 변경된 코드의 서비스 비교
  • 사람이 진행하면서 누락하는 테스트 실수를 방지
  • 테스트 자체가 일종의 가이드 / 문서 역할이 됨

https://jestjs.io/docs/getting-started#using-typescript

 

Getting Started · Jest

Install Jest using your favorite package manager:

jestjs.io

 

 

TEST의 종류

  1. 유닛 테스트 : 특정 타겟팅 한 하나의 함수( = 단일 기능용 함수)를 테스트 하는 것  ex) 환율 변환, 대소문자 변환 등
                        단, 유닛 테스트의 단위를 나눌 때 최소 단위가 달라지는 경우도 있어 "최소 단위" 테스트의 의미로 사용
  2. 통합 테스트 : 하나의 모듈에 연결 된 여러 함수, 코드들을 한번에 테스트 하는 것   ex) API(CRUD) 테스트
  3. E2E 테스트 : End-to-End 테스트, 전체 애플리케이션이 제대로 동작 하는지 테스트 하는 것. 시나리오 베이스를 만들어 순서대로 테스트를 진행.    ex) 웹사이트 로그인 - 내부 사용 - 로그아웃 또는 창 닫음 테스트

* 유닛 테스트 vs 통합 테스트 단위 설정 : 각 회사 / 팀 별로 기준이 바뀌는 일종의 컨벤션 영역

 

 

 

2. JEST 사용하기 

초기 셋팅 

1. JEST 설치 및 package.json 설정

설치 명령어 : 개발용 프레임워크
npm install --save-dev jest ts-jest @types/jest typescript

package.json 에 script 설정
...
  "scripts": {
    "test": "jest --coverage"
    // jest : 테스트 실행 , --coverage: 커버리지 리포트 생성
  },

 

2. jest.config.js 생성 : JEST 환경 설정

module.exports = {
  testEnvironment: 'node', // 테스트 실행 환경을 Node.js로 설정
  verbose: true,           // 각 테스트 케이스 결과를 자세히 출력
  testMatch: ['**/*.test.ts'], // 테스트 파일로 인식할 파일 패턴
  transform: {
    '^.+\\.ts$': 'ts-jest', // 테스트를 위해 .ts 파일을 ts-jest로 변환해서 실행
  },
  moduleFileExtensions: ['ts', 'js'], 
  // import 시 인식할 파일 확장자 
  // 먼저 .ts 를 붙여 찾고, .ts 파일이 없는 경우 .js 를 두번째로 사용
};

 

 

TEST 성공 / 실패 결과 미리보기

1. TEST 성공

: 테스트를 진행 한 내용과 함께 전체 진행했던 항목에 대한 내용까지 표기

JEST TEST 성공 결과 예시
JEST TEST 성공 결과 예시

 

2. TEST 실패 

: 테스트 진행 한 내용 중 에러가 난 부분에 대해 표기하는데, 일부 항목이 FAIL인 경우 정상 항목은 간략하게 표기하고 오류 항목에 대해서만 자세히 표기.

JEST TEST 실패 결과 예시 JEST TEST 실패 결과 예시 2
JEST TEST 실패 결과 예시 1, 2

 

3. JEST 문법

기본 테스트 실행 문법

  • test(), it() : 테스트를 실행하는 함수, 직관성을 위해 it()을 많이 사용
  • expect() : 최종 값을 검증할 때, 검증하는 값을 불러오는 함수, 비슷한 역할을 하는 assert() 가 있음
  • describe() : 테스트 그룹 또는 테스트 스위트. 관련된 테스트를 묶어서 관리(그룹핑)

기본 문법을 활용한 테스트 구문 및 결과
기본 문법을 활용한 테스트 구문 및 결과

 

 

Matcher 함수

: expect() 함수 다음에 체이닝으로 사용하는 함수들, 테스트 결과값의 기준을 작성
  ex) expect().toEqual().something()... => .toEqual().something()... 이 Matcher 함수

 

 

구분 Matcher 함수 종류
값 비교 toBe() : 원시값 정확히 일치
toEqual() : 객체/배열 값 비교
toStrictEqual() : 더 엄격한 객체 비교
참 / 거짓 확인 toBeTruthy() , toBeFalsy() ,
toBeNull() , toBeUndefined() , toBeDefined()
숫자 toBeGreaterThan() , toBeLessThan() ,
toBeGreaterThanOrEqual()
문자열 toContain() : 문자열 포함
toMatch() : 정규식 매칭
배열 toContain() : 요소 포함
toHaveLength()
객체 toHaveProperty() : 특정 프로퍼티 존재
에러 toThrow() : 에러 발생 여부
비동기 resolves.toBe()
rejects.toThrow()

 

 

비동기 테스트 함수

: 과거에는 done() 함수를 활용하여 비동기 함수를 테스트하고, 해당 함수에 최종 값을 전달하였으나 

 최근에는 async & await 구문을 사용하여 더욱 간편하게 테스트 진행

import { getAPI } from '../src/api.router';

1. done() 함수를 활용한 테스트 진행 => 구버전
describe('getAPI 함수 테스트', () => {
  test('네트워크 비동기 함수 테스트를 진행합니다', (done) => {
    // done 콜백함수를 인자로 사용하여 최종 테스트 종료
    // done 함수를 사용하지 않으면 비동기 작업이 끝나지 않고 무한 루프가 됨

    getAPI()
      .then((data: unknown) => {
        expect(data).toBeTruthy();
        done(); // 테스트가 종료 된 이후 이벤트 루프 종료
      })
      .catch((error: unknown) => {
        done(error); // 에러가 생기면 해당 에러를 받고 이벤트 루프를 종료
      });
  });
});

2. async & await 구문을 활용한 테스트 진행 => 많이 사용하는 방식
describe('getAPI 함수 테스트', () => {
  test('네트워크 비동기 함수 테스트를 진행합니다', async () => {
    const data = await getAPI();
    expect(data).toBeTruthy();
  });
});

비동기 함수 테스트 결과, 비동기 작업이기 때문에 작업의 실행 시간이 기존 작업에 비해 길다
비동기 함수 테스트 결과, 비동기 작업이기 때문에 작업의 실행 시간이 기존 작업에 비해 길다

 

 

테스트 더블 : 테스트를 하기 위해 실제 의존 객체(Date 등)를 대신하는 요소들, 테스트의 목적과 실제 사용할 Date를 어떻게 흉내 내냐에 따라 분리

  • Dummy (데이터) : 빈 곳에 채워넣는 가짜 값, 동작에 영향을 끼치지 않는 최소값
  • Fake(데이터) : 실제처럼 동작하도록 간단하게 만드는 구현체, 로직이 올바르게 돌아가는지 확인하는 것이 목적
  • Stub(데이터) : 호출 될 때, return 값을 무조건 나올 수 있도록 고정된 값. 
  • Mock(데이터, 객체) : 어떤 함수가 몇번 호출 되는지, 어떤 인자로 호출하는지 등 작업이 "어떻게" 이뤄지는지 확인. 호출, 인자, 행위를 자세히 검증
  • Spy(객체, 코드) : 가짜로 만들지 않고, 진짜 데이터를 사용해 실제 동작을 구현하고 기록함.
                               기존의 함수&객체를 감싸서 보존하여 실행하고, 일어나는 동작들을 기록

 

 

 


 

📃 내일은 뭘 배울까 🤔

- 테스트 더블 구현하기

- 테스트 패턴

- 테스트 커버리지

반응형