Mocha-Sinon 개발 환경

• Babel-Webpack 설정은 다음 글을 참고 하시기 바랍니다.
• https://royleej9.tistory.com/47

---

Mocha-Sinon

설치

npm i -D mocha sinon sinon-chai

설정

• .mocharc.json

{
  "diff": true,
  "extension": ["js"],
  "watch-extensions": ["js"],
  // "opts": "./test/mocha.opts",
  "package": "./package.jso",
  "reporter": "spec",
  "slow": 75,
  "timeout": 1000,
  "ui": "bdd"
}

디버깅

vscode

• vscode에서 테스트 파일을 열린 상태에서 디버깅 실행

• import 구문 사용을 위해 @babel/register 모듈 필요 - babel7

• launch.json file

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run mocha",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "stopOnEntry": false,
      "args": [
        "tests/**/*.js",
        "--no-timeouts",
        "--require",
        "@babel/register"
      ],
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": null,
      "env": { "NODE_ENV": "testing" }
    }
  ]
}

mocha sidebar (vscode 플러그인)

• nyc 모듈 필요

npm i -D nyc

• test 폴더 기본 이름 - tests
• https://mochajs.org/#mocha-sidebar-vs-code
• import/from 구문 사용을 위해 settings.json 수정 필요 - babel7버전

   "mocha.requires": [
       "@babel/register"
   ]

chrome inspect

• chrome 브라우저의 개발 툴에서 제공하는 디버깅 사용

설정

• mocha --watch --inspect-brk 명령어를 직접 실행해도 됨

• launch.json file - vscode 사용

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "program": "${workspaceFolder}/node_modules/mocha/bin/mocha",
      "args": ["--watch", "--inspect-brk"],
      "console": "integratedTerminal",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///./node_modules/*": "${workspaceFolder}/node_modules/*"
      }
    }
  ]
}

실행

• 테스트 파일 편집 상태에서 F5를 클릭하여 launch에 설정한 내용을 실행

• chrome 브라우저 url에서 chrome://inspect/#devices 입력

• 시간이 조금 경과하면 Remote Target에 프로젝트 정보가 보임 -> inspect 클릭

• chrome 개발 툴이 실행되면서 디버깅 가능해짐

참고

• Mocha : https://mochajs.org/
• sinonjs : https://sinonjs.org/