カクカクしかじか

技術的なアレコレ

JestをChromeデバッガーでステップ実行する方法

背景

Jestでテストコードを書いていた際にconsole.logで値をプリントデバッグしていたのですが、正直しんどい...
何か他にいい方法あるやろ!と思ってVue.jsのテストの洋書を読んでいたら、JestでChromeデバッガーを利用したデバッグの方法が書かれていたので、それを試した個人的メモとして投稿します。

実行環境

Nuxt.js / Jest / Vue Test Utils のアプリケーションで実行しています📝

手順

  • package.jsonに以下の記述を追加
// 中略
"scripts": {
  // 中略
  "test:unit:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand",
},
  • npm run test:unit:debug コマンドをターミナルで実行
  • Chromeの開発者コンソールを開く
  • 以下の部分をクリックして、Chromeデバッガーを起動

スクリーンショット_2021-03-27_23_03_23.png

参考文献

livebook.manning.com