@open-wc/testing Test Adapter for VS Code

A VS Code test adapter for projects using @open-wc/testing and @web/test-runner. Seamlessly integrates web component tests into VS Code's Testing panel, providing a native testing experience for modern web projects.

Features

• ✅ Native Test Explorer Integration - View and run tests directly from VS Code's Testing panel
• 🔍 Intelligent Test Discovery - Automatically finds test files that use @open-wc/testing
• 🎯 Granular Test Execution - Run all tests, individual files, or specific test suites
• 🔗 Clickable Error Links - Jump directly to failing test lines from error messages
• ⚡ Smart Build Detection - Automatically runs build steps when needed (TypeScript, wireit, etc.)
• 📦 Package Manager Support - Works with npm, yarn, pnpm, and bun
• 🎨 CodeLens Integration - Quick "Run all tests" action at the top of test files
• 🗂️ File Mapping - Intelligently maps TypeScript source files to compiled JavaScript for execution

Requirements

Your project must use:

• @open-wc/testing or compatible testing library
• @web/test-runner (or wtr) for running tests
• A test or test:* npm script that executes web-test-runner

Getting Started

1. Install the extension from the VS Code Marketplace
2. Open a project that uses @open-wc/testing
3. Open the Testing panel (View → Testing or click the beaker icon)
4. Discover tests - Tests are discovered automatically when you expand the Testing panel
5. Run tests - Click the play button next to any test file, suite, or individual test

Example Project Setup

Basic Configuration

package.json:

{
  "scripts": {
    "test": "wtr --playwright --browsers chromium"
  },
  "devDependencies": {
    "@open-wc/testing": "^4.0.0",
    "@web/test-runner": "^0.18.0"
  }
}

test/example.test.js:

import { html, fixture, expect } from '@open-wc/testing';
import '../src/my-element.js';

describe('MyElement', () => {
  it('renders properly', async () => {
    const el = await fixture(html`<my-element></my-element>`);
    expect(el).to.exist;
  });
});

TypeScript with Build Step

package.json:

{
  "scripts": {
    "build": "tsc",
    "test": "wtr --playwright --browsers chromium"
  }
}

web-test-runner.config.js:

export default {
  files: ['.tmp/test/**/*.test.js'],  // Compiled output
  nodeResolve: true,
  // ... other config
};

The extension automatically:

• Detects the build script and runs it before tests
• Maps test/example.test.ts → .tmp/test/example.test.js
• Executes tests using the compiled files

Wireit Configuration

package.json:

{
  "scripts": {
    "test": "wireit"
  },
  "wireit": {
    "test": {
      "command": "wtr --playwright --browsers chromium",
      "dependencies": ["build"]
    },
    "build": {
      "command": "tsc",
      "files": ["src/**/*.ts"],
      "output": [".tmp/**"]
    }
  }
}

The extension resolves wireit configurations automatically.

Usage

Running Tests

From the Testing Panel:

1. Open the Testing panel (View → Testing)
2. Expand "Open WC Testing" to see discovered tests
3. Click the play button (▶) next to:
   • The root to run all tests
   • A file to run all tests in that file
   • A suite to run all tests in that suite (if --grep is supported)

From a Test File:

• Click the "▶ Run all tests in this file" CodeLens at the top of any test file

Viewing Results:

• Test results appear in the Testing panel with pass/fail status
• Detailed output is shown in the "Test Results" output panel
• Click on file paths in error messages to jump to the failing line

Commands

• Open WC Testing: Refresh Tests - Manually refresh test discovery

Configuration

Supported File Patterns

The extension automatically discovers test files matching:

• **/*.test.{ts,js,mjs,cjs}
• **/*.spec.{ts,js,mjs,cjs}

Files in dot-folders (e.g., .tmp/, .cache/) are excluded from discovery.

Web Test Runner Options

The extension automatically adds --static-logging to disable dynamic progress bars for cleaner output. Additional options like --files and --grep are passed when running specific tests.

Troubleshooting

Tests Not Discovered

• Ensure your test files import @open-wc/testing
• Check that files match the naming pattern (*.test.* or *.spec.*)
• Try running the refresh command

Tests Not Running

• Verify your package.json has a test script that uses wtr or web-test-runner
• Check that the build step (if any) completes successfully
• Review the "Test Results" output panel for error messages

File Mapping Issues

If your TypeScript tests aren't running:

1. Ensure your web-test-runner.config.js has the correct files pattern
2. Verify the build output directory matches the pattern
3. The extension uses heuristics to map test/ → .tmp/test/ - adjust if your structure differs

Known Limitations

• No per-test granularity for results - Currently marks entire files as pass/fail based on exit code (per-test results coming in future versions)
• --grep filtering - Web Test Runner doesn't support test filtering like Karma, so clicking individual tests runs the entire file
• Single workspace folder - Multi-root workspaces are not yet fully supported

Contributing

Found a bug or have a feature request? Please open an issue on GitHub.

License

MIT

Enjoy testing your web components with VS Code! 🎉