The case of the disappearing 'Debug' CodeLens in Visual Studio Code

10th November 2020

Or how to debug any Jest unit test in Visual Studio Code

I’m trying to debug a TypeScript unit test which uses the Jest library. There’s a nice VS Code extension vs-jest that integrates with Jest and even adds CodeLens labels so you can click to debug a specific test. Except the debug label kept disappearing! It would show when I first loaded the folder in Code, but after the tests all ran then the label would go away. Even though the test is passing, I wanted to debug it so I could step through the code. What’s going on?

There’s some troubleshooting tips listed on the vscode-jest README. This gave me the hint that there are some config settings that can alter how the extension behaves. When I viewed my current settings.json, I saw this:

{
    "typescript.tsdk": "node_modules\\typescript\\lib",
    "eslint.packageManager": "yarn",
    "eslint.validate": [
        "javascript",
        {"language": "typescript", "autoFix": true }
    ],
    "jest.debugCodeLens.showWhenTestStateIn": [
        "fail",
        "unknown"
    ]
}

That last setting caught my attention. Clicking inside that array and code completion offered two other values “pass” and “skip”.

    "jest.debugCodeLens.showWhenTestStateIn": [
       "pass",
       "skip",
        "fail",
        "unknown"
    ]

Adding those and hitting save, and then the ‘debug’ labels returned and stayed for all the tests!