[ TIL ] Day 82 - Jest 프레임 워크 2 "Mock/Spy" 및 여러 개념들

🗓️ 수업 일자 : 2026.1.21

✨ 오늘의 수업 평가 :  [ HARD ]  너무 어려웠어요, 복습 필수! 🫥😶‍🌫️😵‍💫😵

 

어제 배운 Mock / Spy 개념은 이해했는데, 실제 구문으로 들어가니 뭐가 뭔지 하나도 모르겠다..

쉬는 시간 틈틈히 GPT랑 공부해서 어떻게 저떻게 따라는 갔는데 아직도 잘 이해 안 가는..

그래도 막바지에 배운 Express SuperTest 라이브러리는 어렵지 않아 다행이다! 

일단 오늘은 JEST 프레임워크 정리 하기!!!  

 

 

 

 

📝  오늘 배운 내용  

- JEST의 Mock, Spy 사용법

- 테스트 패턴

- 테스트 커버리지

 

---

1. JEST의 Mock, Spy 사용법

 

1) Mock 방식 활용하기

Mock 방식 : 테스트를 할 때 사용되는 객체나 기능, 데이터베이스 등을 "가짜"로 대체하여 진행하는 전략

                    의존성(DB, API, 외부 모듈)을 모두 끊고, 로직 분기를 통제하여 테스트 하는 방식!  

• const mockDB = jest.fn() : Jest가 제공하는 가짜 함수 생성기. 호출 여부, 호출 횟수, 반환값을 마음대로 조작 가능
• mockDB.mockReturnValue() : 빈 함수에 고정된 특정 반환값을 설정 가능
• mockDB.mockClear() : 호출 기록의 초기화
• mockDB.mockReset() : 기록 및 mock 설정 값(리턴값 등)까지 모두 초기화

[학원 예제의 주요 목표]

- 예시1) 빈 함수 jest.fn() 사용해서 함수 리턴 값을 고정으로 설정한 뒤, 전체 로직이 구동 되는지 확인

- 예시2) 콜백으로 구현을 집어넣어, 구현한 로직에 대해 검증

- 예시3) mockImplementation으로 구현을 추가하여 로직이 몇번 호출되고, 어떤 인자가 사용되는지 전체 구조 확인

 

 

2) Spy 방식 활용하기

Spy 방식 : 기존 구현 방식을 유지하고 테스트를 실행, 필요 한 경우 글로벌 함수를 제어하여 일부 동작을 변형 

• const randomSpy = jest.spyOn(Math, 'random') : Jest가 제공하는 Spy 함수, 진짜 로직을 감시하거나 특정 동작을 모방하기 위해 사용. 현재 코드에서는 JS 기본 기능중 하나인 Math.random을 모방하기 위해 사용
• randomSpy.mockReturnValue() : 모방한 로직 혹은 진짜 로직에 고정된 특정 값을 넣어 결과를 변형
• randomSpy.mockImplementation() : 모방한 로직 혹은 진짜 로직에 특정 실행 로직을 넣어 결과를 출력
• randomSpy.mockRestore() : 이전에 설정한 mockReturnValue() 혹은 mockImplementation() 값을 빼고 원래 함수로 복귀

 

3) 모듈 복제 방식

jest.mock() : 느리거나 / 위험하거나 / 환경에 의존하는 모듈을 통째로 가짜로 바꾸는 방식.
                      해당 함수에 "mock할 대상 모듈의 import 경로"를 넣어 Jest가 해당 모듈을 jest.fn()로 제공함
                      따라서 사용법은 기존 함수와 동일하게 사용 가능한 "빈 함수"가 되는 것

 

+추가 모듈 복제 예시

1. 외부 API(HTTP 요청) : 테스트 실행 시 실제 서버가 필요한데, 서버가 멈추면 테스트도 멈추므로 모듈 복제하여 실행 
2. 파일 시스템 : 테스트 중 실제 파일이 필요 없고, CI 환경에서 파일이 없으면 실패하므로 시뮬레이션 하기 위해 모듈 복제
3. 시간 / 날짜 모듈 : 의외로 날짜와 시간은 위험한 비결정성 요소
4. 인증 / 토큰 모듈 : 테스트 중 JWT 만료 등 부가 로직 에러 때문에 중요 로직의 테스트가 원활히 이루어 지지 않음. 
5. 메일 / 알림 / 외부 SDK : 테스트를 진행하며 실제 메일, 알림등 외부 요소로 작업이 이뤄질 수 있는 부분은 모듈 복제

 jest.mock('axios');     // 1. 외부 API (HTTP 요청)
 jest.mock('fs');        // 2. 파일 시스템
 jest.mock('dayjs');     // 3. 시간 / 날짜 모듈
 jest.mock('./auth');    // 4. 인증 / 토큰 모듈
 jest.mock('./mailer');  // 5. 메일 / 알림 / 외부 SDK

 

 

 

2. 테스트 패턴

1) 4단계 테스트 패턴

: 테스트를 구조적으로 작성하기 위한 패턴의 4단계

1. Setup: 테스트 환경을 설정하는 단계. 테스트에 필요한 변수나 객체를 초기화하고, 테스트 실행 전에 필요한 상태를 준비함
2. Exercise: 실제 테스트할 코드를 실행하는 단계. 테스트하고자 하는 함수나 메서드를 호출하여 결과를 얻음
3. Assertion: 기대하는 결과를 검증하는 단계, jest로 설명하면 expect와 같은 함수를 써서 확인하는 것
4. Teardown: 테스트 후 정리하는 단계, 테스트가 끝난 후에 Setup에서 만든 상태를 원래대로 되돌림

 

2) JEST의 테스트 패턴

Setup & Teardown을 지원 해 주는 함수(Hooks) (https://jestjs.io/docs/setup-teardown)

• beforeEach() / afterEach()  : 특정 로직의 실행 전 / 실행 후 반드시 이루어 져야 하는 코드를 셋팅
• beforeAll() /afterAll() : 모든 테스트가 실행되기 전 / 후에 딱 한번만 실행되는 One-Time Setpup 코드를 셋팅 

beforeAll(() => console.log('1 - beforeAll'));
afterAll(() => console.log('1 - afterAll'));
beforeEach(() => console.log('1 - beforeEach'));
afterEach(() => console.log('1 - afterEach'));

test('', () => console.log('1 - test'));

describe('Scoped / Nested block', () => {
  beforeAll(() => console.log('2 - beforeAll'));
  afterAll(() => console.log('2 - afterAll'));
  beforeEach(() => console.log('2 - beforeEach'));
  afterEach(() => console.log('2 - afterEach'));

  test('', () => console.log('2 - test'));
});

// 실행 순서
// 1 - beforeAll
    // 1 - beforeEach
    // 1 - test
    // 1 - afterEach
        // 2 - beforeAll
    // 1 - beforeEach
            // 2 - beforeEach
            // 2 - test
            // 2 - afterEach
    // 1 - afterEach
        // 2 - afterAll
// 1 - afterAll

 

 

3. 테스트 커버리지

기본 정보

• 정의 : 서비스 코드에 대해 얼마나 많은 부분에 테스트가 이루어졌는지 나타내는 지표
• 측청 방식 : 실행 된 코드라인(Lines) / 호출 된 함수(Funcs) / if문, 조건문 처럼 각 경우의 수가 실행되는지(Branch) 여부를 바탕으로 최종 측정 결과(Stmts)가 표기됨
• 아래 이미지와 같이 테스트 진행 후 터미널에 정보가 표기되고, coverage라는 폴더 안에 HTML 형식으로도 저장 됨

학원 제공 코드를 활용하여 터미널에서 테스트 커버리지 확인

학원 제공 코드를 활용하여 테스트 진행 후 "coverage" 폴더에 저장 된 커버리지 정보 확인

 

 

사용법

1. package.json 파일 안에 설정한 jest 구문에 "--coverage" 추가 
2. 테스트 파일 작성 후 테스트 진행 
3. 터미널에서 1차 결과 확인, "coverage"폴더에서 상세 결과 확인

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

 

 

 

---

 

📃 내일은 뭘 배울까 🤔

- Express SuperTest 라이브러리