VSCode Jest Setup
I use both Jest for my tests and VSCode as my editor, here are a few little tweaks to config to make using these two tools together a little nicer.
Install firsttris.vscode-jest-runner
Name: Jest Runner
Id: firsttris.vscode-jest-runner
Publisher: firsttris
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner
It adds Run
and Debug
code lens links above your tests allowing you to quickly run or debug a test!
Tweak debug settings
You can configure VSCode to exclude node internals and improve the debugging experience with smart step by adding this to your VSCode config
// .vscode/settings.json
"jestrunner.debugOptions": {
"skipFiles": ["<node_internals>/**"],
"smartStep": true
},
If using pnpm
When using PNPM I hit an issue where I could no longer just click run without this error:
basedir=$(dirname “$(echo “$0” | sed -e ‘s,\\,/,g’)”)SyntaxError: missing ) after argument list
By explicitly setting the jest path the error no longer occurs
// .vscode/settings.json
"jestrunner.jestPath": "node_modules/jest/bin/jest.js",
Got any more tips?
Please let me know if there are other simple quality of life improvements when using Jest and VSCode together