NPM) Jest 단위 테스트

✏️ Setting

📍 모듈 설치

• npm 으로 jest 설치하기
  • --save-dev 는 해당 모듈이 개발 단계에서만 사용된다는 의미로 애플리케이션 작동과는 관련없다는 의미이다.

npm install --save-dev jest

📍 환경 설정

• 이렇게 설치하면 package 의 devDependencies 에 기록되게 된다.
• 그리고 scripts 의 test 도 아래와 같이 수정해준다.

"scripts": {
    "test": "jest"
  },
"dependencies": {
    "express": "^4.18.2",
    "express-handlebars": "^7.1.2",
    "figlet": "^1.7.0"
  },
  "devDependencies": {
    "jest": "^29.7.0"
  }

• 설정이 완료되면 아래 명령어로 test 를 실행할 수 있다.
  • 지금은 아무 test 를 추가하지 않았기 때문에 오류가 발생한다.

npm test

➜ npm test

> meadowlark@1.0.0 test
> jest

No tests found, exiting with code 1

📍 테스트 디렉토리 설정

• 아래 경로로 테스트 파일을 생성해준다.

lib/__test__/test.js 

✏️ 단위 테스트 작성

📍 Test 작성

• 간단한 html 페이지를 응답하는 api 가 잘 작동되는지 검증할 예정이다.
  • 아래 모듈은 view 에 있는 home 이라는 html 파일을 응답하는 api 이다.

exports.home = (req, res) => res.render('home');

• 위 모듈을 import 해 아래와 같이 api 를 단위 테스트 할 수 있다.
  1. 해당 api 는 요청값이 필요없어서 빈 객체로 생성했다.
  2. 응답은 jest.fn() 를 호출할 수 있도록 생성해줬다.
  3. 생성한 객체를 파라미터로 검증을 원하는 api 를 호출해주면 jest.fn() 에 의해 어떻게 호출됬는지 추척할 수 있다.
  4. mock.calls 는 배열형식으로 res 변수의 호출 내역을 저장하게된다.
     • 호출 될 때 마다 인자가 추가되므로 한번 호출했으니 length 는 1 이 된다.
     • 그 다음 차원의 인자엔 응답받은 파라미터가 입력되게 되므로 api 가 응답하고 있는 ‘home’ 하나만 저장되 있어야 한다.

// src/lib/__test__/test.js

const handlers = require('../handlers')

test('Unit: 홈페이지 렌더링', () => {
    const req = {}
    const res = {render: jest.fn()}
    handlers.home(req, res)
    expect(res.render.mock.calls.length).toBe(1)
    expect(res.render.mock.calls[0][0]).toBe('home')
})

📍 Test 실행

• 명령어를 입력하면 테스트 결과를 확인할 수 있다.

# npm test

> meadowlark@1.0.0 test
> jest

 PASS  src/lib/__test__/test.js
  ✓ home page renders (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.121 s, estimated 1 s
Ran all test suites.

• 만약 테스트를 실패하면 어느부분이 실패했는지도 체크해준다.

● Unit: 소개페이지 랜더링

    expect(received).toBe(expected) // Object.is equality

    Expected: 2
    Received: 1

      13 |     const res = {render: jest.fn()}
      14 |     handlers.about(req, res)
    > 15 |     expect(res.render.mock.calls.length).toBe(2)
         |                                          ^
      16 |     expect(res.render.mock.calls[0][0]).toBe('about')
      17 | })
      18 |

      at Object.toBe (src/lib/__test__/test.js:15:42)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        0.217 s, estimated 1 s
Ran all test suites.

📍 모니터링 설정

• 코드를 수정할 때마다 테스트를 실행하는게 번거롭다면 모니터링 모드로 코드가 수정될 때마다 자동으로 테스트하는 모니터링 모드도 있다.

npm test --watch

✏️ 코드 커버리지

• 코드를 얼마나 테스트 했는가에 관한 정량적 답변
• jest 는 자동으로 코드 커버리지를 분석하는 툴이 내장되어있다.

npm test -- --coverage

• Stmts : 표현식, 제어문 같은 자바스크립트 문을 의미한다.
• Branch : if-else 와 같은 분기를 시킬 수 있는 제어문을 의미한다.
• Funcs: 함수를 의미한다.
• line : 행을 의미한다.

> meadowlark@1.0.0 test
> jest --coverage

 PASS  src/lib/__test__/test.js
  ✓ Unit: 홈페이지 렌더링 (1 ms)
  ✓ Unit: 소개페이지 랜더링
  ✓ Unit: 404 오류
  ✓ Unit: 500 오류

-------------|---------|----------|---------|---------|-------------------
File         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-------------|---------|----------|---------|---------|-------------------
All files    |     100 |      100 |     100 |     100 |                   
 handlers.js |     100 |      100 |     100 |     100 |                   
-------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        0.219 s, estimated 1 s
Ran all test suites.