VSCode Jest Setup

Jake Ginnivan
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!

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



Jake Ginnivan

Co-Founder featureboard.app | Principal Consultant arkahna.io | Previously Tech Lead Seven West Media WA | International Speaker | OSS | Mentor