[NodeJS] Mocha, Mochawesome, Supertest 이용하여 테스트 구현하기

 

최근 Web 업무를 받아 능숙하진 않지만 열심히 하고 있다🤓

 

기존에는 API 서버를 테스트할 때 PostMan을 사용하고 있었는데,

포스트맨으로 테스트를 한다는 것은 일일이 Send를 하고 Response를 확인해서 잘 돌아가고 있는지 확인해야 한다.

 

포스트맨을 이용한 테스트는 번거롭다는 단점이 있지만 틀린 방법은 아니다.

하지만 개발이 진행되면 진행될수록 던져보아야 할 요청은 많아지고, 함수들을 수정할 경우가 많아지며 이에 다른 기능들이 영향받을 수 있는 가능성도 커진다.

 

Node.js 서버 테스트 코드를 구현할 때 도움을 많이 받고 유용했던 블로그 글과

나의 경험을 정리해 보고자 한다.🌟

 

 

 

1. Mocha 사용하기

대표적인 테스트 툴 중 하나인 Mocha를 사용하였다.

 

• 설치 방법

$ npm install mocha --save-dev

 

• 사용 방법

https://mochajs.org/

Mocha - the fun, simple, flexible JavaScript test framework

 

https://velog.io/@wimes/node.js-REST-API-%EC%84%9C%EB%B2%84-%EB%A7%8C%EB%93%A4%EA%B8%B0-5.-TDD-5hk418e6xu

[node.js REST API 서버 만들기] 5. TDD

 

 

 

2. Chai Expect 사용하기

 

검증 로직 구현을 위해 chai의 expect를 쓰고자 한다.

 

Chai에는 assert, expect, should의 스타일이 있는데

이들의 차이는 아래 공식 문서 링크에서 확인해볼 수 있겠다..

https://www.chaijs.com/guide/styles/

Assertion Styles - Chai

 

본인은 expect를 사용했으며 특별~한 이유는 없다. 본인 취향이었다

 

 

 

3. Supertest 사용하기

 

Wimes 님의 velog 게시글을 읽으며 따라해보면 어떻게 API 테스트를 어떻게 구현할 지 확실히 감이 잡힐 것이라고 생각된다.

이제 더 나아가 supertest에서 인증이나 헤더를 달고 싶을 텐데

https://www.npmjs.com/package/supertest

supertest

공식 문서를 참고하면 잘할 수 있을 것이다.

 

 

 

4. Mochawesome 사용하기

 

간단한 테스트 코드를 가지고 있으면 터미널 창에서 스크롤을 오르내리며 결과를 보는 것이 나쁘지는 않겠으나,

Test Suite, Test가 늘어나면 보기 어려울 것이다.

(나의 경우 서버 로그와 섞여서 나와서 더더욱 보기 힘들었다.)

 

이 때 HTML 웹 페이지 형태로 테스트 결과를 볼 수 있게 도와주는 것이 Mochawesome이다.

 

• 설치 방법

$ npm i mochawesome mochawesome-report-generator --save-dev

 

• 사용 방법

테스트 실행 시, 명령어 뒤에 --reporter mochawesome 을 붙인다.

$ node_modules/.bin/mocha test/**/*.js --reporter mochawesome

 

• 도움이 되는 글

https://www.lambdatest.com/blog/how-to-generate-mocha-reports-with-mochawesome/

How To Generate Mocha Reports With Mochawesome?

 

 

 

5. Mochawesome 결과보는 방법(VSCode)

 

분명 초기에 HTML 코드를 작성할 때 VSCode에서 브라우저로 열어보면서 했을텐데

오랜만에 html 파일을 보려니 어떻게 하는지 방법을 까먹었다....🙄

 

VSCode의 open in browser 이라는 Extension을 다운받는다.

 

다운 받은 후 default browser를 지정하는 방법은

1. Ctrl + , (Settings 단축키)를 눌러 Settings에 들어간다.

2. set default browser와 같은 키워드로 검색하여 원하는 브라우저를 저장한다.

 

3. mochawesome-report 디렉터리에 html파일을 우클릭하여 브라우저에서 연다.

 

4. 이런 화면으로 확인할 수 있따

출처: https://www.npmjs.com/package/mochawesome

 

내가 맹든 테스트 ~~

 

 

 

6. 도움이 될 수도 있는 내용들

 

• 여러 테스트들을 테스트하고 싶을 때 ➡ Object 형태로 저장하여 forEach문 활용하여 모두 테스트

Mocha 테스트 함수 구조 참고 Link: https://velog.io/@gwon713/Mocha-SuperTest

[Mocha] SuperTest (1)

 

• describe() 안에 describe()가 있을 수 있다