LoginSignup
2

More than 5 years have passed since last update.

create-react-app-typescript で出来た Jest 単体テストのデバッグ

Posted at

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 したり色々試してみたが駄目だった。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2