VSCode Jest Setup

1 min readApr 24, 2021

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 Debugcode lens links above your tests allowing you to quickly run or debug a test!

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
},

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",

Please let me know if there are other simple quality of life improvements when using Jest and VSCode together