VisualStudioCodeでJestのデバッグ構成を設定する

■はじめに

Jestでテストを実行するにあたって、テストコードとアプリケーション側のコードをデバッグしたかったため、VSCodeでデバッグする構成を作りました。

■Jestのデバッグ構成設定

VSCodeで「command + ,」を押すと、設定画面が表示されるので、「settings」で検索します。

そうすると、「settings.jsonで編集」というリンクが表示されるのでクリックします。

// デバッグ構成
"launch": {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "[Jest] 全てのテストを実行",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": ["--runInBand"],
            "console": "externalTerminal",
            "internalConsoleOptions": "neverOpen",
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        },
        {
            "type": "node",
            "request": "launch",
            "name": "[Jest] 現在のファイルを実行",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": ["--runTestsByPath", "${relativeFile}", "--config", "jest.config.ts"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        }
    ]
},

settings.jsonにデバッグ構成のコードを貼り付けます。

■VSCodeでテストコードをデバッグしてみる

先ほど設定したデバッグ構成は、VSCodeの虫マーク内に表示されます。

今回は「現在のファイルを実行」というデバッグ構成で実行してみます。

「全てのテストを実行」の場合は、文字通り全てのテストが実行されます

テストファイルを開いて、デバッグしたいコードの左側をクリックすると、赤丸が表示されます。

この赤丸をつけた部分がブレークポイントで処理が止まる部分になります。

赤丸をつけた状態で、左上の緑三角マークをクリックすると、現在開いているファイル（OtherUtils.test.ts）が実行されて、赤丸をつけたコードで処理が止まります。

サイドバーや変数名にhoverすることで、ブレークポイント時点での変数の中身や引数を確認することができます。