How to debug Jest tests with VSCode (2021 Version)

One of my most viewed stories was How to debug Jest test with VSCode. This was written back in 2017. Since then there have been much improvements to Jest, VSCode, Typescript that make many of the details about command line parameters obsolete. I wanted to make an updated version which I think is the simplest approach.

(There is video at the bottom if you would rather watch than read)

Steps:

In under 20 steps you can have complete debug setup for you to expand on.

1. Make directory for project mkdir debug-test
2. Navigate to directory cd debug-test
3. Initialize NPM npm init -y
4. Configure package entry point and metadata
5. Install dependencies npm i typescript jest @types/jest ts-jest
6. Create .gitignore and add ignore locations
7. Create tsconfig.json npx tsc --init and set options (outDir: `./build`)
8. Setup package.scripts (build, prestart, start, test, test:debug)
9. Create src/index.ts with exported function
10. Verify npm start compiles and runs index
11. Create src/index.test.ts using function from index.ts
12. Initialize jest config using ts-jest npx ts-jest config:init and set ignore locations
13. Verify npm test runs the test
14. Set breakpoint in the test and start debugging!

14.1 Click “Debug” above your package scripts

14.2 Select the test:debug script

14.3 Inspect variables!

The first article spent a bit of time walking through the struggles you might have which could be interesting but if you just want to get to the solution of debugging jest tests I think is the fastest way.

I think some people find the integrated Debug in package.json a bit too magical or are more purist and don’t want a test editor adding this to their package.json.

• https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-debug-terminal

There is a setting that allows you to disabled it here:

"debug.javascript.codelens.npmScripts": "top"

Video:

In this video I go through each step above and explain the progression.

Code Repo:

https://github.com/mattmazzola/debug-jest

References:

• npx tsc --init
https://www.typescriptlang.org/tsconfig#lib
• npx ts-jest config:init
  https://github.com/kulshekhar/ts-jest#getting-started
• JavaScript Debug Terminal
  https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-debug-terminal

Conclusion:

I hope this article will allow people to get setup debugging tests faster so they can spend more time on writing the tests and working on the meaningful problems. Let me know what you thought in the comments!