IT 회사에서 즐겁게 지내기!

Express를 이용한 API 서버를 개발중입니다.

Express는 JS(JavaScript) 프레임워크 입니다.

Mocha를 이용한 단위테스트를 하고 있죠.

Java나 C#과 달리 디버깅이 까다롭더라구요.

Mocha 구동 시 옵션을 넣어주어야합니다.

그리고 Chrome을 사용합니다.

1. package.json 수정

pakage.json 파일을 수정합니다.

npm 스크립트에 debug 옵션을 넣었죠.

"scripts": {
  "test": "./node_modules/.bin/mocha --recursive --exit",
  "debug": "./node_modules/.bin/mocha --recursive --inspect-brk"
}

물론 npm run을 사용하지 않아도 됩니다.

mocha에 옵션을 주어 직접 실행도 가능해요.

2. 테스트 코드에 debugger 추가

디버그를 하고 싶은 위치에 코드를 넣습니다.

Chrome 디버거가 멈출 위치에요.

it('...', function () {
  ...
  const expenseController = new ExpenseController(mockDailyExpense);
  expenseController.saveDailyExpense(request, response);
  debugger
  
  saveDailyExpenseStub.calledOnceWithExactly(...);
  saveDailyExpenseStub.restore();
})

3. npm run debug

디버그 스크립트를 실행합니다.

npm run debug

만약 package.json을 수정하지 않았다면

mocha를 직접 실행하는 것도 가능합니다.

mocha --inspect-brk '파일명'

그러면 아래와 같은 문구가 나옵니다.

Debugger listening on ws://127.0.0.1:9229/...

For help see https://nodejs.org/en/docs/inspector

4. Chrome 실행 (chrome://inspect/)

크롬을 실행해서 주소창에 아래를 입력합니다.

chrome://inspect

node 테스트가 실행 중인 것이 보입니다.

chrome inspect 실행 화면

5. inspect 클릭 후 Debug

inspect를 클릭하면 디버거 창이 실행됩니다.

테스트가 시작되지 않고 멈춰있죠.

실행을 시키면 테스트가 시작됩니다.

그리고 debugger 위치에서 멈추게 되지요.

Chrome 디버그 화면

익숙한 사용 경험으로 충분히 디버깅이 됩니다.

Control 영역을 통해 코드 진행이 가능하구요.

Scope에서 변수들의 값 확인이 가능합니다.

Console 창에서 코드 입력/실행도 됩니다.

nodeJS 테스트가 막힌다면 큰 도움이 되실거에요.

문제를 훨씬 빠르게 파악하는 것이 가능하답니다.