create-react-app-typescript で作ったアプリの単体テスト (Jest) のデバッグを VSCode 上で行おうとして失敗した。
どうしても必要な時に最低限使えるよう SourceMap が無効になったデバッグには成功したので記録に残す。
- 出来ること
- Chromium の DevTool を使って変数参照を行う。
- debugger; を仕込んで途中でブレイクする。
- 出来ないこと
- TypeScript のソースコードを表示すること。(トランスパイル結果しか見えない)
プロジェクトで以下を実行 5858 はよく使われるポートらしい。
$ CI=true node --debug-brk node_modules/react-scripts-ts/scripts/test.js --env=jsdom --runInBand
Debugger listening on [::]:5858
- node のオプションの意味
- --debug-brk : デバッグ開始時停止する。その間にブラウザを接続したり出来る。
- Jest のオプションの意味
- --env=jsdom : DOM を用意する。
- --runInBand : 直列に実行する。デフォルトでは複数プロセスで動くのでテスト出来ない。
.vscode/launch.json の設定 (歯車ボタン > 画面右下の Add Configuration... > Node.js : Attach to Process で出来る)
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"processId": "${command:PickProcess}",
"port": 5858
},
- 再生ボタン > "Attach to Process" を選ぶと vscode はポート番号 5858 でデバッグを開始する。
- TypeScript のソースコードを見れないので、ブレイクポイントの設定には debugger; 文を使う。
yarn run eject したり色々試してみたが駄目だった。