VSCode上でNode.js Jestでdebug（デバッグ）をするための設定をしてみた

SHIFT Group 技術ブログ

2022年11月7日 15:18

はじめに

こんにちは、SHIFTの開発部門に所属している Katayama です。

VSCode 上で Node.js（ES6 で実装）の debug をするための設定をしてみたでは VSCode 上で Node.js（ES6 で実装したもの）のデバッグを行うための設定を行ってみた。

今回は Jest でテストを実行する際に、同じように VSCode 上でデバッグするための設定をやってみたいと思う。以下で見ていくように、やり方は 2 つあるので、それぞれについてみていきたいと思う。

①VSCode の Extensions（拡張機能）を利用する
②VSCode の組み込みデバッガを使用する設定を launch.json に行いデバッグする

※ES6（ES Modules を利用した）コードで Jest によるテストを実行する方法はNode.js（ES6 で実装）で Jest によるテストを実行するための Babel・ESLint の設定とは？を参照ください。

①VSCode の Extensions（拡張機能）を利用する

この方法が最も簡単だが、VSCode の拡張機能をインストールしてその拡張機能の機能でデバッグを行う方法。拡張機能としてはvscode-jestになる。

インストールすると、VSCode のメニューに Testing というのが追加され、テスト一覧が見れるようになる（以下の画像を参照）。

あとはテスト上のアイコンを右クリックして、 Debug Test からテストを実行すればいい。

実際に上記の画像のようにブレークポイントを置いて、テストをデバッグ実行してみると、意図したブレークポイントで処理が止まる事が確認できる。

※拡張機能をインストールすると、公式に以下のように記載がある通り、デフォルトでは jest コマンドが見つかれば自動でテストが実行されるが、開発中でこれが煩わしい場合には、autoRunの設定を off にするなど変更すればいい（設定は.vscode/settings.json に行う）。

If the extension can find the jest command, by default it will automatically run and monitor all tests in watch mode upon launch, and you should see tests, status, errors, coverage (if enabled) in TestExplorer and editors like this:（拡張機能が jest コマンドを見つけることができれば、デフォルトでは起動時にすべてのテストをウォッチモードで自動的に実行・監視し、TestExplorer やエディタでテスト、ステータス、エラー、カバレッジ (有効な場合) などを確認できるはずです。）

// .vscode/settings.json
{
	...
	"jest.autoRun": "off"
}

②VSCode の組み込みデバッガを使用する設定を launch.json に行いデバッグする

これは Jest の公式のDebugging in VS Codeに書かれている方法で、VSCode の組み込みデバッガを使用する設定を自分で行ってデバッグを行う方法。テストを実行しているプロセスを起動して VSCode のデバッガにアタッチするというのを自動でやるか？手動でやるのか？で 2 パターンあるので、それぞれについて見ていく。

A：手動でデバッガにアタッチする

この方法ではまず、Node.js のビルトインの inspect コマンドを利用して、デバッグ用のクライアントをリッスンさせる（Debugging Guide）。具体的にはDebugging in VS Codeにあるように、以下のようなコマンドを実行すればいい。すると Node.js の Debbuger が 127.0.0.1:9229 で立ち上がる。

study@localhost:~/workspace/node-grpc (main *)
$ node --inspect-brk node_modules/.bin/jest --runInBand __tests__/sum.test.js
Debugger listening on ws://127.0.0.1:9229/d2a8ee06-6ce7-4a60-8e6f-541ce9cbdfba
For help, see: https://nodejs.org/en/docs/inspector

この後はその Debbuger に VSCode のデバッガをアタッチすればいい。具体的には .vscode/luanch.json に以下のようにアタッチのための設定を記載すればいい。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9229
    }
  ]
}

後は VSCode のメニューの Run and Debug から VSCode のデバッガのアタッチを行えばいい。実際にやってみると、以下の画像のようにデバッガがアタッチされ、jest のテスト実行時にデバッグができている事が確認できる。

B：自動でデバッガにアタッチする

この方法では .vscode/luanch.json にデバッグの設定をするだけでいい。具体的には以下のようになる。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/.bin/jest",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "args": ["__tests__/sum.test.js"]
    }
  ]
}

上記のように設定した後は、以下の動画のように Run and Debug からデバッグが実行できる。

※launch.json の中身についてはLaunch configuration attributesに書かれている通りなので詳細はそちらを参照。

まとめとして

今回は Node.js の Jest でテスト実行時にデバッグする方法について、拡張機能を利用した方法と、launch.json の設定を行う方法の 2 つについてみてきた。テストを書いていてプロダクトコードの変数の中身・分岐などを確認したい事は多々あると思うが、VSCode であれば今回見てきた方法で簡単にデバッグできると思うので、積極的に利用していきたいと思った。

個人的には「①VSCode の Extensions（拡張機能）を利用する」の方法であれば、②の方法で設定した launch.json などの追加設定がなく、導入の手順としても1Stepのみなので楽でいいなと思います。

《この公式ブロガーの記事一覧》

執筆者プロフィール：Katayama Yuta
認証認可（SHIFTアカウント）や課金決済のプラットフォーム開発に従事。リードエンジニア。
経歴としては、SaaS ERPパッケージベンダーにて開発を2年経験。 SHIFTでは、GUIテストの自動化やUnitテストの実装などテスト関係の案件に従事したり、DevOpsの一環でCICD導入支援をする案件にも従事。その後現在のプラットフォーム開発に参画。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

みんなにも読んでほしいですか？

オススメした記事はフォロワーのタイムラインに表示されます！

最後まで読んでくださり、ありがとうございます！

御社サービスのご相談はお気軽に。

ソフトウェア品質のプロがお伺いします。