Jest Debugger: Debug tests with NPM, PNPM or Yarn (with or without PnP enabled).

Jest Debugger

Visual Studio Code Marketplace

VisualStudio Marketplace

Comparison with vscode-jest-runner

Jest Debugger is focused on running or debugging specific test or test-suite using any package manager which it can auto-detect. It also automatically finds your Yarn version on any platform, while Jest Runner does not automatically find your package manager or Yarn implementation on every platform.

Features

Simple way to run or debug a specific test As it is possible in IntelliJ / Webstorm

Run & Debug your Jest Tests from

• Context-Menu
• CodeLens
• Command Palette (ctrl+shift+p or cmd+shift+p)

Supports

• yarn & vscode workspaces (monorepo)
• dynamic jest config resolution
• yarn 2+ PnP
• CRA & and similar abstractions

Usage with CRA or similar abstractions

add the following command to settings, to pass commandline arguments

"jestdebugger.jestCommand": "npm run test --"

Debugging JSX/TSX with CRA

for debugging JST/TSX with CRA you need to have a valid babel and jest config:

to add a babel.config.js with at least the following config

// babel.config.js
module.exports = {
    presets: [
      ["@babel/preset-env", { targets: { node: "current" } }],
      "babel-preset-react-app",
    ],
  };

add a jest.config.js with at least the following config

module.exports = {
  transform: {
    '\\.(js|ts|jsx|tsx)$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|ico|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|webmanifest|xml)$':
      '<rootDir>/jest/fileTransformer.js'
  },
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy'
  },
}

Extension Settings

Jest Debugger will work out of the box, with a valid Jest config, however, you can use the following settings to configure Jest Debugger:

Shortcuts

click File -> Preferences -> Keyboard Shortcuts -> "{}" (top right) the json config file will open add this:

{
  "key": "alt+1",
  "command": "extension.runJest"
},
{
  "key": "alt+2",
  "command": "extension.debugJest"
},
{
  "key": "alt+3",
  "command": "extension.watchJest"
},

Want to start contributing features?

Some open topics get you started

Steps to run in development mode

• npm install
• Go to Menu "Run" => "Start Debugging"

Another vscode instance will open with the just compiled extension installed.

Notes from contributors

• Babel compile Issue when starting Debug in JSX/TSX,

  • check the post of @Dot-H https://github.com/firsttris/vscode-jest-runner/issues/136
  • https://github.com/firsttris/vscode-jest-runner/issues/174

• By default Jest finds its config from the "jest" attribute in your package.json or if you export an object module.export = {} in a jest.config.js file in your project root directory.
  Read More: Configuring Jest Docs

• If Breakspoints are not working properly, try adding this to vscode config:

"jestdebugger.debugOptions": {
    "args": ["--no-cache"],
    "sourcemaps": "inline",
    "disableOptimisticBPs": true,
}

vscode-jest-debugger