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:
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!