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

Written on November 10, 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?

Screenshot showing 'Debug' going away

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!

Categories: Unit Testing, Visual Studio Code