#🧪 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, Vitest, Rstest, Node.js (native), Bun, Deno and Playwright 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: The extension uses AST-based parsing to read configuration files. It supports static resolution of variables defined in the file and configuration wrappers (like defineConfig), but it does not execute the file (function calls are ignored). Complex runtime logic or external imports are not supported. If your configuration is too complex, you can set disableFrameworkConfig: true to rely on defaultTestPatterns.

🚧 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, Vitest, Rstest, Node.js, Bun, Deno, and Playwright tests
• ›🔍 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
• ›⚛️ Create React App and similar abstraction layers
• ›🛠️ Framework support including Vite, Tanstack Start, Nx, Next.js, and NestJS

##⚙️ Configuration

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'
    },
  },
});

For Node.js Native Test Runner:

• ›Coverage is supported natively via the --experimental-test-coverage flag (enabled by default for coverage runs).
• ›No extra setup required!

For Bun:

• ›Coverage works out of the box! (uses bun test --coverage)
• ›No extra setup required.

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
• ›Node.js: Defaults to coverage/ directory (standard native behavior)

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"

Customize the test runner for your project:

This updated configuration table now includes the Node.js Test Runner settings.

The extension automatically reads configuration from your framework config files.

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

This means:

• ›It cannot resolve external imports or complex runtime logic.
• ›Variables are supported via static analysis as long as they are defined within the file.
• ›Function Calls are not executed. Only configuration wrappers (like defineConfig) are supported.
• ›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.

###🏗️ Projects Support

The extension supports the projects configuration for Jest, Vitest, and Rstest. This is essential for monorepos or multi-project workspaces.

• ›Jest: Supports projects array defined as string paths (e.g. ['<rootDir>/packages/*']) or configuration objects.
• ›Vitest: Supports projects array in your config file or vitest.workspace.ts exporting an array of project configurations.
• ›Rstest: Supports projects as an array of config objects or relative config paths.

The extension will recursively parse these project configurations to identify test files across your entire workspace.

###Jest Config Options

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

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/**'],
  },
});

###Node.js Native Runner

The Node.js test runner does not use a specific configuration file in the same way Jest or Vitest do. Instead, it relies on glob patterns or file naming conventions.

• ›By default, the extension looks for files matching: **/*.{test,spec}.?(c|m)[jt]s?(x) and **/__tests__/**/*.?(c|m)[jt]s?(x).
• ›You can customize this by modifying jestrunner.defaultTestPatterns in your VS Code settings.

###Playwright Config Options

Example Playwright Config:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  testMatch: ['**/*.spec.ts'],
  testIgnore: ['**/fixtures/**'],
});

###Rstest Config Options

Example Rstest Config:

// rstest.config.ts
export default {
  root: '__dirname',
  include: ['src/**/*.test.ts', 'tests/**/*.spec.ts'],
  exclude: ['**/fixtures/**', '**/node_modules/**'],
  projects: [
    './packages/app/rstest.config.ts',
    {
      include: ['packages/lib/**/*.test.ts'],
      exclude: { patterns: ['**/legacy/**'] },
    },
  ],
};

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.

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);
});

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