Windows 環境の VSCode で Jest をちゃんとデバッグするハック

拡張機能を使って Jest のデバッグを行っている場合は良いのですが、launch.json を記述してデバッグしている場合、Windows 環境の VSCode と Jest のデバッグはやや相性が悪いようです。
node_modules 内の jest.js のパスが Windows とそれ以外とでは違っていたり、jest に渡すテストファイルのパス形式が unix 形式 (スラッシュ区切り) しかサポートしていなかったり。
前者はどうとでもできるのですが、後者が結構痛くて、${file} の代わりに ${fileBasenameNoExtension} でお茶を濁すのが通例となっているようですが、別ディレクトリに同名テストファイルがあると困ってしまうと思います。
ということで、launch_jest.js という JavaScript ファイルを用意し、これらの違いや制約を吸収してしまいましょう。

• .vscode/launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Current Test",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/.vscode/launch_jest.js",
            "protocol": "inspector",
            "args": [
                "${file}",
                "--runInBand"
            ],
            "skipFiles": [
                "<node_internals>/**/*.js",
                "node_modules",
            ]
        }
    ]
}

• .vscode/launch_jest.js

if (process.platform == "win32") {
    for (let i = 0; i < process.argv.length; i++) {
        const arg = process.argv[i];
        process.argv[i] = arg.replace(/\\/g, "/")
    }
    require('../node_modules/jest/bin/jest');
}
else {
    require("../node_modules/.bin/jest");
}

これで、現在開いているテストファイルをデバッグすることができるようになりました。

拡張機能を使う場合

拡張機能を使う場合は launch.json も launch_jest.js によるハックも不要です。
ただ、拡張機能はいくつかあるものの、メンテされていないものも多いです。
現在、メンテがされてて且つちゃんと使えるのは Jest Runner だけかなと思います。 Jest Runner を使うと、テストケースを右クリックして単体でのテスト実行やデバッグ実行ができます。

marketplace.visualstudio.com

私の場合は Workspace 設定 (.code-workspace) で下記のように設定して使っています。

    "settings": {
        "jestrunner.debugOptions": {
            "skipFiles": [
                "<node_internals>/**/*.js",
                "node_modules/"
            ]
        }
    }

Jest Run It という拡張機能も良さげなのですが、最近リリースされたばかりのためまだ完全には動作しないようです。私の環境ではデバッグ実行がエラーで失敗してしまいました。
今後に期待です。

marketplace.visualstudio.com

ちなみに、インストール数ダントツ一位の Jest という拡張機能は、セーブ時に毎回バックグラウンドでテスト実行してくれるというものですが、個人的にはクセが強くて馴染めませんでした。

marketplace.visualstudio.com