Jest の テスト・スクリプトをデバッグする術

React が大分わかってきた（ような気がする）ので、Unit Test に進んでみる。またまた忍び難き道を忍ばねばならなかった。以下、備忘録。この世界も jasmine だとかなんだとか、あまりに選択肢が多く目が回るが、とりあえず Jest を勉強してみようと判断。

[Jest のインストール]
以下の要領でいたって簡単。
    https://facebook.github.io/jest/docs/en/getting-started.html#content

CLI のどこからでも jest と叩きたいので、グローバルにもインストールした。
    npm install -g jest

[初期動作確認]
上のサイトの要領に従って sum のテストを実施。すんなり動作した。さほどの感激は無し。

---
ここからが実務となり、厚い壁がはだかっているのは既にわかっている。C#でも Unit Test を書くのは、普通にコードを書くのと同じぐらい大変な作業だが、プログラマのライフセーバーとも言えるので、堪えどころ。

まず、私の書く Unit Test自体にバグが発生することが分かっている。これを詳細にデバッグできないと全くお話にならない。まずはここらから検証。

[Unit Test のデバッグ]
暫し調べると、やはり本家のここにたどり着いた：
    https://facebook.github.io/jest/docs/en/troubleshooting.html#content


要は、Node上で Jest.js が走り、そこから私の書いた sum.test.js が走るわけだが、Node が web server を立ててくれ、そこに Chrome からアクセスし、Chromeの F12 で Just 向けに書いた Unit Test スクリプトをデバッグ可能、というわけだ。Nodeは偉い。早速 CLI にて：

   node --inspect -brk node_modules/.bin/jest --runInBand

やはり、さっぱり動作しない（涙）。結論から申すと、４つの問題が上の短い一行に潜在している。

1) inspect-brk は、Node v8 からの option であり、本勉強で使っている v6 では認識しないので、以下のように書き換えなければならない：

   node --debug-brk --inspect

2) node_modules/.bin/jest と本家のサンプルにあるが、私の環境では、これは実は CLI コマンドを指しているので、おかしなことになる。以下のように、 jest.js を指定する必要がある。1) とあわせると、以下のようになる。

   node --debug-brk --inspect ./node_modules/jest/bin/jest.js --runInBand

3) 上で確かに Node が走り始め、デバッガーのアタッチを待機しているようなプロンプトがでる。プロンプトに表示されている URLを Chrome から開くか、または chrome::/inspect を開き、"Open Dedicated DevTools for Node" をクリックする。

どうせなにかあるだろうなと思いつつ（SPA始めて性格がひねてきた）、Console を開くと、やはりエラーが出ている。WebSocket で 400 が返っている。。。暫し調査すると、今度は Node v6 という比較的新しい version では、--inspect  を --inspect=0.0.0.0:9229  と書かないといかんとさ。は～。

4) ここまで到達し、Chrome F12 の Console ではエラーが発生しなくなった。確かに jest が動作する直前のところで、ブレークがかかっている。しかし、この時点では、まだ私の作った sum.js や、sum.test.js はロードされていない。いったいどうやってブレークするの？と暫し途方に暮れたが、あっ！そういえば JSには debugger; というのがあったわな；これを unit test 側にいれてみる。

it('adds 1 + 2 to equal 3 in Typescript', () => {

debugger;

const sum = require('../sum.tsx');

expect(sum(1, 2)).toBe(3);

});

ところが、全く break してくれない。alert() とか console.log() を入れてみるが、全く動作しない。この unit test、本当に動いているのかいな？、とおもって toBe(4) にすると、きちんと assert fail する。暫し調べると、
    https://github.com/facebook/jest/issues/1652

中ほどにある @develar 氏の作品を試してみた:
    https://github.com/NikhilVerma/jest-environment-node-debug-fixed

これにて、
node --debug-brk --inspect=0.0.0.0:9229 ./node_modules/jest/bin/jest.js --env jest-environment-node-debug --runInBand

という最終形に至ることができた。debugger; できちんと break してくれる、偉いっ。

---

ということで、Jest との 戦闘開始から８時間、ようやく Unit Test を Debug できる環境ができあがった。早速、package.json に登録：

"scripts": {

"dev-build": "webpack --debug ",
"dev-watch": "webpack --debug --watch",
"prod-build": "SET NODE_ENV=production&&webpack -p --config webpack.config.js",

"test": "jest",
"debug-unit-test": "node --debug-brk --inspect=0.0.0.0:9229
./node_modules/jest/bin/jest.js --env jest-environment-node-debug --runInBand"

},

C#で mock 等、ある程度の Unit Test は経験しているので、ここからはす～っと、、、いかぬことは分かっている、ふんっ。