mochaのテスト実行時、VSCodeでES6のコードに埋め込んだブレークポイントを有効にしたい。

結構設定が大変でした。。
やり方を乗せておきます。

インストールされている環境

mocha
babel-register

babel-registerを有効にしないで、そのままmochaコマンドを実行すると
import文などのES6記述で構文エラーが発生します。
上記自体はpackage.jsonのscriptに
babel-registerでコンパイルしてあげればOKですが
例：

"test": "NODE_ENV=test mocha --recursive --compilers js:babel-register test/*",

これをVSCode上で適用したい。。と思ったのが背景でした。

設定は下記のようにしました。

//■launch.json
{
   "version" : "0.2.0",
   "configurations" : [
      {
        "name" : "Run mocha",
        "program" : "${workspaceRoot}/node_modules/mocha/bin/_mocha",
         "request" : "launch",
         "args" : [
            "--compilers",
            "js:babel-core/register",
            "--recursive",
            "--debug-brk",
            "test/**/*.js"
         ],
         "cwd" : "${workspaceRoot}",
         "env" : {
            "NODE_ENV" : "development"
         },
         "protocol" : "inspector",
         "runtimeExecutable" : null,
         "stopOnEntry" : false,
         "type" : "node"
      }
   ]
}

nameはいわずがなでprogramにmochaのファイルを読み込ませます。
argsにmochaに渡す引数オプションを渡しています。
"--compilers","js:babel-core/register"とそれぞれargsに個別に渡していいのね。。
って事をしらなくて小一時間悩みましたｗ

~~続いてpackeage.jsonのscriptsの中に下記を追加~~

"test-debug": "NODE_ENV=test mocha --recursive --debug-brk --compilers js:babel-register test/**/*.js"

今回はtest-debugと命名しましたが何でもいいと思います。(npmコマンドに存在しなければ)
ですが、testコマンドと違って--debug-brkを入れないとコマンドが終了してしまいブレークポイントにヒットしません。
↑これがなくても動きました。。launch.jsonに設定するだけで大丈夫のようです。

これで設定は完了！
まずはターミナルで下記コマンドを実行します。

npm run test-debug

今回test-debugと命名したので、runをつけなければ動きません。
npm上でエイリアスできないものはrunをつけないと動かない？というイメージです。
(ちなみにtstやtもtestコマンドとしてエイリアスされるので、被らないようにしなければいけないっぽい)
詳しく読んでないので文献を載せておきます。意味が違ったらすみません。
test | npm Documentation
run-script | npm Documentation

次にtestディレクトリ配下のjsファイルにブレークポイントを設置して・・・
VSCode上のデバック項目を確認

f:id:kinachan0725:20170721160056p:plain