[O'REILLY] Node & Express - 5-2장 : JEST 실습해보기

1. 제스트 설치와 설정

- 제스트는 훌륭한 범용 테스트 프레임워크이다. 

- 다른 테스트프레임워크에는 모카, 재스민, 아바, 테이프 등이 있다.

 

- 터미널에 설치한다.

npm i --save-dev jest

- 여기에서 --save-dev 는 개발 단계에서만 사용하는 패키지라는 뜻이다.

 

- package.json 에 다음과 같이 test를 입력해준다.

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

 

- 이제 npm test로 실행할 수 있다. 아직은 테스트가 없으므로 오류가 일어난다.

 

2. 단위 테스트

- 단위 테스트의 핵심은 함수나 구성 요소를 고립시키는 것으로, 이 고립 작업의 테크닉인 '모형'에 대해 알아야 한다.

- 모형:

  1) 의존하는 패키지가 있으면 그 모형(시뮬레이션)을 만들어야 효율적으로 테스트할 수 있다. 

  2) 테스트를 위한 애플리케이션 리팩터링 : 현재 앱에는 테스트할 코드가 많지 않다. 테스트를 쉽게 하기 위해, 라우트 핸들러를 라이브러리로 분리해야 한다.

 

lib/handlers.js

lib/handlers.js

/lib/fortune.js

lib/fortune.js

 

meadowlark.js

meadowlark.js

3. 첫번째 테스트

- 두가지 방법이 있다.

- 첫번째 : 테스트를 모두 __test__ 서브디렉토리에 넣는 방법

- 두번째 : .test.js라는 확장자를 붙이는 방법

 

- 여기서는 둘다 써본다. lib/__test__/handlers.test.js 파일을 만든다.

 

lib/__test__/handlers.test.js

해 괴 망 측

- 1 : 테스트 코드 라우터를 import 해서 사용한다.

- 2 : 다음은 지금 테스트하고 있는 기능에 대한 설명이다. 여기서는 홈페이지가 렌더링 되는 게 확실한지 테스트 한다.

- 3 : 렌더링을 시작하려면 요청과 응답객체가 필요하다. 이 테스트에서는 요청객체를 테스트 할 필요가 없어서 빈 객체를 만든다.

- 4 : 렌더링 함수는 제스트 메서트 jest.fn()을 호출하면 만들어진다. 이 함수는 어떻게 호출됐는지 추적하는 범용 모형 함수이다.

- 테스트의 중요한 부분인 assertion이 있다. 의도한 동작대로 잘 하는지 어떻게 확신할까? 이 테스트코드에서 해야하는 일은 문자열 home을 가지고 응답 객체의 render 메소드를 호출하는 일이다.

- 제스트의 모형함수는 자신이 호출되었을 때를 항상 추적하므로, 이 함수가 한번만 호출되었는지 확인만 하면 된다. (두번이라면 문제가 있다)

- 6 : 첫 번째 expect 문이 한번만 호출 되었는지 확인하는 역할을 한다.

- 7 : res.render.mock.calls[0] 은 첫 번째로 호출된 상황이며, res.render.mock.calls[0][0] 은 그 상황에서 전달 받은 매개변수 중 첫번째이다. 이것은 'home'이어야 한다.

 

홈 뷰가 아닌 다른 것을 렌더링하도록 홈페이지 핸들러를 수정하게 되면 테스트가 실패한다.

 

4. 테스트 유지보수

- 테스트는 만들어놓으면 끝나는게 아니고, 유지보수도 해야한다.

- 무엇을 테스트할지, 그 테스트는 얼마나 세밀해야 할지 정해야 한다.

- 당연히 항공공학이나 의료 기구에 들어갈 코드를 테스트하는 기준과 님이 만든 포트폴리오 사이트를 테스트하는 코드의 기준은 다르다.

 

5. 코드 커버리지

- 코드 커버리지는 코드를 얼마나 테스트했는가에 관한 정량적 답변이지만, 단순히 답변할 수는 없다.

- 제스트에는 자동으로 코드 커버리지를 분석하는 툴이 있다.

npm test -- --coverage

- 다음과 같이 터미널에 입력하면, 아래와 같이 현재까지의 결과가 나온다.

지금까지의 테스트

- 문(Stmts) : 표현식이나 제어문 같은 자바스크립트 문을 말한다.

- Branch :  if-else 같은 제어문을 나타낸다.

 

cf) 랜덤한 기능을 테스트하는 엔트로픽 기능 테스트 라는 것도 있다. 확률분포를 이용해서 테스트 하는 방법이 있다. chatGPT한테 물어보자.

 

6. 통합테스트

- 지금 당장은 통합테스트를  할 만한 기능은 없다.

- 간단하고 허접한 기능을 만들어 홈페이지에서 어바웃 페이지로 가는 링크가 잘 동작하는지 테스트 해보자.

- views/home.handlebars 에 링크를 추가한다

허 - 접

- data-test-id는 테스트를 위해 식별할 수 있도록 해놓은 장치이다. DOM 검색에는 비용이 들기 때문에 그냥 박아놓는게 좋다.

- meadowlark.js의 listen 부분을 수정한다.

meadowlark.js

- 궁금하면 chatGPT한테 물어보면 된다.

갓-GPT

이제 퍼펫티어와 포트파인더를 설치한다.

npm i --save-dev puppeteer

npm i --save-dev portfinder

 

- 이제부터 작성할 통합테스트는 다음과 같이 동작한다.

  1) 자유로운 포트에서 앱서버를 시작

  2) 헤드리스 크롬 브라우저에서 페이지를 연다

  3) 앱 홈페이지로 이동

  4) data-test-id 가 'about'인 링크를 찾아서 클릭

  5) 링크로 이동할 때까지 기다림.

  6) /about 페이지에 도착했는지 확인.

 

- integration-tests 디렉토리를 만들고, 그 안에 basic-navigation.test.js 를 만든다

 

/integration-tests/basic-navigation.test.js

뭐여 이게

- 제스트의 beforeEach 와 afterEach를 써서 각 테스트 전후에 서버를 시작하고 멈추게 함.

- 퍼펫티어의 대부분  API는 프로미스를 반환한다.

- 퍼펫티어의 문서에 따라 네비게이션과 클릭을 Promise.all에 같이 넣어서 경쟁상태를 방지한다.

- 퍼펫티어 API는 너무 다양해서 공식문서를 활용하자.

- 이해 안되면 뭐다 ? chatGPT..! 

 

다음 시간에는 요청과 응답객체에 대해 자세히 알아보자.