The case of the disappearing 'Debug' CodeLens in Visual Studio Code
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!
Categories: Unit Testing, Visual Studio Code