🧪 Jest & Vitest Runner

Run and debug tests with ease, right from your editor

Overview • Features • Configuration • Keyboard Shortcuts • Contributing

---

🎯 Overview

A lightweight VS Code extension for running and debugging Jest and Vitest tests directly in your editor. Works out-of-the-box with minimal configuration.

✨ What's New? Try the new native Test Explorer with code coverage integration! Enable it by setting "jestrunner.enableTestExplorer": true in your VS Code settings.

⚠️ Important Notice: The extension is currently undergoing major refactoring. If you encounter any issues or have questions, please don't hesitate to create a GitHub issue.

✨ Features

🚀 Run & Debug Experience ✅ Run individual tests or entire test suites with a single click 🐛 Debug tests with full breakpoint and variable inspection support 📊 Generate coverage reports to analyze test coverage 👀 Watch mode for automatic test re-runs during development 📸 Snapshot updating with dedicated command	📋 Multiple Access Points 🖱️ Context menu in editor and explorer (right-click on tests) 🔍 CodeLens annotations above test definitions (optional) 🗂️ Test Explorer integration showing test hierarchy in dedicated panel ⌨️ Command palette (Ctrl+Shift+P) with full command access ⚡ Keyboard shortcuts for quick test execution
🎯 Smart Test Detection 🤖 Automatic framework detection - distinguishes between Jest and Vitest 🔍 Reads and applies include/exclude patterns (globs and regex) from framework configs for fine-grained control over which tests appear	💼 Project Flexibility 📦 Monorepo support for yarn & VS Code workspaces ⚙️ Multiple configurations with glob-based config resolution 🔌 Yarn 2 Plug'n'Play - automatically detected, no configuration needed ⚛️ Create React App and similar abstraction layers 🛠️ Framework support including Vite, Tanstack Start, Nx, Next.js, and NestJS

⚙️ Configuration

📊 Coverage Support

The extension supports test coverage through VS Code's Test Explorer. When you run tests with coverage, the results are displayed directly in VS Code's coverage view.

Prerequisites

For Jest:

• Coverage works out of the box! No configuration needed.

For Vitest:

• Install a coverage provider:

npm install -D @vitest/coverage-v8
# or
npm install -D @vitest/coverage-istanbul

• You only need to specify the coverage provider in vitest.config.ts:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    coverage: {
      provider: 'v8', // or 'istanbul'
    },
  },
});

Coverage Directory Detection

The extension automatically detects the coverage directory from your framework configuration:

• Jest: Reads the coverageDirectory option from your Jest config
• Vitest: Reads the reportsDirectory option from your Vitest coverage config

If not specified, it defaults to coverage/ in your project root.

Running Tests with Coverage

All coverage entry points use the same Coverage profile powered by VS Code's native coverage API.

Coverage via Test Explorer

• Click the "Coverage" button (shield icon) in the Test Explorer panel
• Coverage results appear in VS Code's Coverage panel (View → Testing → Show Coverage)
• Inline decorations in the editor show covered/uncovered lines

Coverage via CodeLens / Command Palette

• Use the CodeLens "Coverage" action (if enabled) above a test or suite
• Or run the Command Palette command: "Jest: Run Test with Coverage"

🛠️ Extension Settings

Customize the test runner for your project:

Setting	Description
Jest Configuration
jestrunner.configPath	Path to Jest config (relative to workspace folder, e.g. jest-config.json). Can be a string or a glob mapping object to support multiple Jest configs. Example with glob mapping: {"**/*.it.spec.ts": "./jest.it.config.js", "**/*.spec.ts": "./jest.unit.config.js"} - The first matching glob is used, so specify more specific patterns first. Config path is relative to jestrunner.projectPath or workspace root. Use jestrunner.useNearestConfig: true to search up directories for the matching config file.
jestrunner.jestCommand	Define an alternative Jest command for projects using abstractions like Create React App (e.g. npm run test --).
jestrunner.runOptions	CLI options to add to Jest commands (e.g. ["--coverage", "--colors"]). See Jest CLI documentation.
jestrunner.debugOptions	Add or override VS Code debug configurations (e.g. { "args": ["--no-cache"] }). Only applies when debugging tests.
jestrunner.enableESM	Manually enable ESM support. When set to true, --experimental-vm-modules is added to NODE_OPTIONS. Default: false.
Vitest Configuration
jestrunner.vitestConfigPath	Path to Vitest config (relative to workspace folder, e.g. vitest.config.ts). Can be a string or a glob mapping object similar to configPath.
jestrunner.vitestCommand	Define an alternative Vitest command (default: npx --no-install vitest).
jestrunner.vitestRunOptions	CLI options to add to Vitest commands (e.g. ["--reporter=verbose"]). See Vitest CLI documentation.
jestrunner.vitestDebugOptions	Add or override VS Code debug configurations for Vitest (e.g. { "args": ["--no-cache"] }). Only applies when debugging Vitest tests.
UI Options
jestrunner.defaultTestPatterns	Fallback patterns used when no 'testMatch'/'testRegex' (Jest) or 'include' (Vitest) configuration is found. Default: ["**/*.{test,spec}.?(c|m)[jt]s?(x)", "**/__tests__/**/*.?(c|m)[jt]s?(x)"]
jestrunner.enableTestExplorer	Enable the Test Explorer integration using VS Code's Testing API. Shows tests in dedicated Test Explorer panel. Default: false
jestrunner.enableCodeLens	Bring back the old CodeLens feature with inline run/debug buttons (replaced by Test Explorer). Default: true
jestrunner.codeLens	Specify which CodeLens actions to show when CodeLens is enabled. Options: "run", "debug", "watch", "coverage", "current-test-coverage". Default: ["run", "debug"]
jestrunner.preserveEditorFocus	Keep focus on the editor instead of switching to the terminal when running tests.
Debugging
jestrunner.enableDebugLogs	Enable debug logging to the "Jest Runner" output channel. Useful for troubleshooting test detection and configuration issues. Default: false
Project Management
jestrunner.projectPath	Path to project directory. Can be absolute (e.g. /home/me/project/sub-folder) or relative to workspace root (e.g. ./sub-folder).
jestrunner.changeDirectoryToWorkspaceRoot	Change directory before running tests. Priority order: 1. projectPath 2. nearest package.json location 3. workspace folder.
jestrunner.disableFrameworkConfig	If true, the extension will ignore any framework configuration files (e.g. jest.config.js, vitest.config.ts) and use the jestrunner.defaultTestPatterns instead.

📋 Supported Framework Config Options

The extension automatically reads configuration from your framework config files.

⚠️ Important: The extension uses regex-based parsing to read configuration files. It does not interpret the file as JavaScript/TypeScript code.

This means:

• It cannot resolve external variables, imports, require, or function calls.
• Configuration options (roots, testMatch, etc.) must be static literals in the file.
• Only a single configuration file is parsed. If you use config inheritance, ensure the file the extension reads contains the necessary patterns.

If your configuration is too complex for this parser, you can set jestrunner.disableFrameworkConfig: true. This will disable config parsing and the extension will rely solely on jestrunner.defaultTestPatterns to identify test files.

⚠️ Important: projects attribute in vitest/jest config files is not yet supported but planned for a future release.

Jest Config Options

Option	Type	Description
rootDir	string	Root directory for resolving paths
roots	string[]	Directories to search for test files (e.g., ["<rootDir>/src", "<rootDir>/tests"])
testMatch	string[]	Glob patterns for test files (e.g., ["**/*.test.ts"])
testRegex	string | string[]	Regex patterns for test files
testPathIgnorePatterns	string[]	Regex patterns to exclude files (e.g., ["/fixtures/", "/node_modules/"])

Example Jest Config:

// jest.config.js
module.exports = {
  rootDir: '.',
  roots: ['<rootDir>/src', '<rootDir>/tests'],
  testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
  testPathIgnorePatterns: ['/node_modules/', '/fixtures/', '/__mocks__/'],
};

Vitest Config Options

Option	Type	Description
root	string	Project root directory
test.dir	string	Base directory for test file discovery
test.include	string[]	Glob patterns for test files (e.g., ["**/*.test.ts"])
test.exclude	string[]	Glob patterns to exclude (e.g., ["**/e2e/**"])

Example Vitest Config:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  root: '.',
  test: {
    dir: 'src',
    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
    exclude: ['**/node_modules/**', '**/e2e/**', '**/fixtures/**'],
  },
});

🔧 Advanced Configuration Examples

Usage with CRA or similar abstractions

Add the following command to settings:

"jestrunner.jestCommand": "npm run test --",
"jestrunner.debugOptions": {
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
    "runtimeArgs": ["test", "${fileBasename}", "--runInBand", "--no-cache", "--watchAll=false"]
}

nvm

"jestrunner.jestCommand": "nvm use && npm run test --",
"jestrunner.debugOptions": {
    "runtimeExecutable": "/PATH/TO/YOUR/node"
}

ESM (ECMAScript Modules)

ESM support is now opt-in. To enable it, set "jestrunner.enableESM": true in your settings. This will automatically add --experimental-vm-modules to NODE_OPTIONS for debugging.

🧪 Advanced Test Examples

The extension fully supports Jest's parameterized tests using it.each and describe.each. These allow you to run the same test logic with different inputs, making your tests more concise and maintainable.

In the test names, you can use template variables like %s (string), %i (integer), %f (float), etc., which Jest replaces with the actual parameter values for better readability.

Jest Example

it.each([
  ['apple', 5],
  ['banana', 6],
  ['cherry', 6],
])('should return correct length for %s', (fruit, expectedLength) => {
  expect(fruit.length).toBe(expectedLength);
});

Vitest Example

import { describe, it, expect } from 'vitest';

it.each([
  { input: 'hello', expected: 5 },
  { input: 'world', expected: 5 },
])('length of $input is $expected', ({ input, expected }) => {
  expect(input.length).toBe(expected);
});

Dynamic Test Names

You can also use dynamic test names derived from class method names:

class TestClass {
  myFunction() {
  }
}
it(TestClass.prototype.myFunction.name, () => {
  expect(true).toBe(true);
});

⌨️ Keyboard Shortcuts

1. Open Command Palette → Preferences: Open Keyboard Shortcuts (JSON)
2. Add the following shortcuts:

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

🤝 Contributing

Want to start contributing features? Check out our open issues to get started!

🚀 Development Setup

1. Clone the repository
2. Install dependencies
3. Start debugging
   • Press F5 or go to Run → Start Debugging
   • A new VS Code window will open with the extension loaded

---

Made by the open source community

⭐ Star us on GitHub • 🐛 Report a Bug • 💡 Request a Feature