Vue Auto Test

A VS Code extension that instantly generates Vitest test files for Vue components and provides quick access to run tests directly from the editor.

Overview

Vue Auto Test streamlines your Vue.js testing workflow by automatically generating test files and providing convenient tools to run tests without leaving VS Code. It supports Vue 3 projects using Vitest and @vue/test-utils, with automatic detection of your project structure, package manager, and TypeScript configuration.

Perfect for projects using:

• Vue.js 3
• Script setup
• Composition API
• Vite
• Vitest
• @vue/test-utils

Key Features

Test File Generation

• One-click test file generation for any Vue component
• Automatic component name detection and conversion
• Maintains your project folder structure
• Prevents accidental overwrites
• Supports both TypeScript and JavaScript projects

Test Execution

• Run individual tests directly from the context menu
• Run tests with coverage reports
• Automatic package manager detection (npm, yarn, pnpm, bun)
• Copy test commands to clipboard
• Keyboard shortcuts for quick access

Smart Configuration

• Configurable test directory location
• Support for path aliases (@ imports)
• Customizable component name format
• Automatic TypeScript/JavaScript detection

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Vue Auto Test"
4. Click Install

Quick Start

Generate a Test File

1. Open any .vue component file
2. Right-click in the editor or in the Explorer
3. Select "Generate Vue Test File"
4. The test file is created in your configured test directory

Run a Test

1. Open any .spec.ts or .spec.js file
2. Right-click in the editor
3. Select "Vue Auto Test" → "Run Test"

Usage

Generating Test Files

Method 1: Context Menu (Recommended)

1. Open a .vue component file
2. Right-click inside the editor or in the Explorer
3. Click "Generate Vue Test File"
4. The extension creates the test file in your configured test directory

Method 2: Command Palette

1. Press Ctrl+Shift+P (Cmd+Shift+P on Mac)
2. Type: "Vue Auto Test: Generate Vue Test File"
3. Press Enter

The generated test file will:

• Be placed in your configured test directory (default: test folder at project root)
• Maintain the same folder structure as your source files
• Use the correct import path based on your configuration
• Include a basic rendering test as a starting point

Example:

• Component: src/components/ExampleComponent.vue
• Test generated: test/components/ExampleComponent.spec.ts

Running Tests

When you right-click on a .spec.ts or .spec.js file, you'll see a "Vue Auto Test" submenu with the following options:

• Run Test - Executes the test in a terminal
• Run Test with Coverage - Executes the test with coverage report
• Copy Run Test Command - Copies the test command to clipboard
• Copy Run Test with Coverage Command - Copies the test command with coverage to clipboard

Method 1: Context Menu

1. Right-click on any .spec.ts or .spec.js file in the editor or Explorer
2. Hover over "Vue Auto Test" submenu
3. Select your desired option

Method 2: Keyboard Shortcuts

• Run Test: Ctrl+Alt+T (Windows/Linux) or Cmd+Alt+T (Mac)
• Run Test with Coverage: Ctrl+Alt+Shift+T (Windows/Linux) or Cmd+Alt+Shift+T (Mac)
• Copy Run Test Command: Ctrl+Alt+C (Windows/Linux) or Cmd+Alt+C (Mac)
• Copy Run Test with Coverage Command: Ctrl+Alt+Shift+C (Windows/Linux) or Cmd+Alt+Shift+C (Mac)

The extension automatically detects your package manager by checking for lock files:

• pnpm-lock.yaml → uses pnpm
• yarn.lock → uses yarn
• bun.lockb → uses bun
• Otherwise → uses npm

Example commands generated:

• pnpm vitest run test/components/example-component.spec.ts
• pnpm vitest run test/components/example-component.spec.ts --coverage

Configuration

All settings can be configured in VS Code Settings (Ctrl+, / Cmd+,). Search for "Vue Auto Test Wrapper" to find all available options.

Test Directory

Set where test files are generated. Default is test folder at the project root.

Settings Path: vueAutoTestWrapper.testDirectory

Default: test

Example:

• Component: src/components/ExampleComponent.vue
• Test Directory: test
• Include Source Directory: false (default)
• Test generated: test/components/ExampleComponent.spec.ts

The extension maintains the same folder structure as your source files within the test directory, but by default removes the source directory name from the path.

With Include Source Directory enabled:

• Component: src/components/ExampleComponent.vue
• Test Directory: test
• Include Source Directory: true
• Test generated: test/src/components/ExampleComponent.spec.ts

Source Directory

Configure the source directory path used for calculating import paths.

Settings Path: vueAutoTestWrapper.sourceDirectory

Default: src

Example:

• Source Directory: src
• Component: src/components/Button.vue
• Import path calculated from src directory

Use Alias (@)

Enable this option to use @ alias for imports instead of relative paths. This is useful when your project uses path aliases configured in vite.config.ts or tsconfig.json.

Settings Path: vueAutoTestWrapper.useAlias

Default: false

When enabled:

• Imports use @/path/to/component format
• Example: import ExampleComponent from '@/components/ExampleComponent.vue'

When disabled (default):

• Imports use relative paths
• Example: import ExampleComponent from './ExampleComponent.vue'

Component Name Format

Configure the format for component names in imports and test file names.

Settings Path: vueAutoTestWrapper.componentNameFormat

Default: kebab-case

Available formats:

• kebab-case (default)

  • File: my-component.vue
  • Import: import MyComponent from './my-component.vue'
  • Test file: my-component.spec.ts
  • Note: Uses PascalCase for import variable name (JavaScript/TypeScript doesn't allow hyphens in variable names)

• camelCase

  • File: my-component.vue
  • Import: import myComponent from './my-component.vue'
  • Test file: myComponent.spec.ts

• PascalCase

  • File: my-component.vue
  • Import: import MyComponent from './my-component.vue'
  • Test file: MyComponent.spec.ts

• snake_case

  • File: my-component.vue
  • Import: import my_component from './my-component.vue'
  • Test file: my_component.spec.ts

Include Source Directory

Control whether the source directory name is included in the test file path.

Settings Path: vueAutoTestWrapper.includeSourceDirectory

Default: false

When false (default):

• Component: src/views/salas-raid.vue
• Test generated: test/views/salas-raid.spec.js

When true:

• Component: src/views/salas-raid.vue
• Test generated: test/src/views/salas-raid.spec.js

This setting allows you to choose whether to mirror the exact source directory structure including the source directory name, or to create a cleaner test structure without it.

Generated Test Structure

The extension generates tests with the following structure:

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ComponentName from './ComponentName.vue'

describe('ComponentName.vue', () => {
  it('renders correctly', () => {
    const wrapper = mount(ComponentName)
    expect(wrapper.exists()).toBe(true)
  })
})

For JavaScript projects, the same structure is generated with .spec.js extension:

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ComponentName from './ComponentName.vue'

describe('ComponentName.vue', () => {
  it('renders correctly', () => {
    const wrapper = mount(ComponentName)
    expect(wrapper.exists()).toBe(true)
  })
})

This provides:

• Explicit imports from Vitest (describe, it, expect) for compatibility with all Vitest configurations
• Proper imports from @vue/test-utils
• Correct import path to your component (relative or alias-based)
• Proper component name in imports (based on your format configuration)
• Basic rendering test as starting point
• TypeScript or JavaScript support (automatically detected)

Note: If your component uses plugins like vue-i18n, vue-router, or pinia, you'll need to configure them in the test. For example, for vue-i18n:

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}
})

const wrapper = mount(ComponentName, {
  global: {
    plugins: [i18n]
  }
})

Use Cases

Use Case 1: Quick Test Setup for New Components

Scenario: You've just created a new Vue component and need to set up tests immediately.

Steps:

1. Create your component: src/components/MyComponent.vue
2. Right-click in the editor
3. Select "Generate Vue Test File"
4. Result: test/components/MyComponent.spec.ts is created with a basic test

Benefit: No manual file creation, no import path calculation, no boilerplate typing.

Use Case 2: Running Individual Tests During Development

Scenario: You're working on a specific component and want to run only its tests.

Steps:

1. Open the test file: test/components/MyComponent.spec.ts
2. Right-click in the editor
3. Select "Vue Auto Test" → "Run Test"
4. The test runs in a terminal using your package manager

Benefit: Quick feedback without running the entire test suite.

Use Case 3: Checking Test Coverage

Scenario: You want to see coverage for a specific component.

Steps:

1. Open the test file
2. Right-click in the editor
3. Select "Vue Auto Test" → "Run Test with Coverage"
4. Coverage report is generated

Benefit: Immediate visibility into what parts of your component are tested.

Use Case 4: Consistent Test Structure Across Team

Scenario: Your team needs consistent test file structure and naming conventions.

Steps:

1. Configure the extension settings in your workspace
2. Team members use the extension for all new components
3. All tests follow the same structure automatically

Benefit: Uniform codebase, easier code reviews, predictable test locations.

Use Case 5: Testing Components in Nested Folders

Scenario: Your project uses feature-based folder structure with nested components.

Example structure:

src/
  features/
    dashboard/
      components/
        Header.vue
        Sidebar.vue
      views/
        HomePage.vue

With default test directory (test), tests are generated as:

test/
  features/
    dashboard/
      components/
        Header.spec.ts
        Sidebar.spec.ts
      views/
        HomePage.spec.ts

Steps:

1. Open any component in nested folders
2. Generate test file
3. Import paths are automatically calculated correctly
4. Test file is created in the corresponding location in the test directory

Benefit: Works regardless of folder depth or structure, maintaining organized test structure.

Use Case 6: Using Path Aliases

Scenario: Your project uses @ alias for imports configured in vite.config.ts or tsconfig.json.

Steps:

1. Enable "Use Alias" in extension settings
2. Generate test files
3. Imports will use @/path/to/component format

Example:

• Component: src/components/Button.vue
• Generated import: import Button from '@/components/Button.vue'

Benefit: Consistent with your project's import style.

Requirements

• VS Code version 1.80.0 or higher
• Vue 3 project
• Vitest installed in your project
• @vue/test-utils installed in your project

Keyboard Shortcuts

Action	Windows/Linux	Mac
Run Test	Ctrl+Alt+T	Cmd+Alt+T
Run Test with Coverage	Ctrl+Alt+Shift+T	Cmd+Alt+Shift+T
Copy Run Test Command	Ctrl+Alt+C	Cmd+Alt+C
Copy Run Test with Coverage Command	Ctrl+Alt+Shift+C	Cmd+Alt+Shift+C

Shortcuts only work when editing .spec.ts or .spec.js files.

Extension Settings

This extension contributes the following settings:

• vueAutoTestWrapper.testDirectory - Directory where test files are generated (default: test)
• vueAutoTestWrapper.sourceDirectory - Source directory path (default: src)
• vueAutoTestWrapper.useAlias - Use @ alias for imports (default: false)
• vueAutoTestWrapper.componentNameFormat - Component name format: kebab-case, camelCase, PascalCase, or snake_case (default: kebab-case)
• vueAutoTestWrapper.includeSourceDirectory - Include the source directory name in the test file path (default: false)

Commands

The extension provides the following commands (accessible via Command Palette):

• Vue Auto Test: Generate Vue Test File - Generate a test file for the current Vue component
• Vue Auto Test: Run Test - Run the current test file
• Vue Auto Test: Run Test with Coverage - Run the current test file with coverage
• Vue Auto Test: Copy Run Test Command - Copy the test command to clipboard
• Vue Auto Test: Copy Run Test with Coverage Command - Copy the test command with coverage to clipboard

Context Menus

Vue Component Files (.vue)

• Generate Vue Test File - Appears when right-clicking on .vue files

Test Files (.spec.ts, .spec.js)

• Vue Auto Test submenu with:
  • Run Test
  • Run Test with Coverage
  • Copy Run Test Command
  • Copy Run Test with Coverage Command

Troubleshooting

Test menu doesn't appear for .spec.js files

If the menu doesn't appear for .spec.js files, try:

1. Reload the VS Code window: Ctrl+Shift+P → "Reload Window"
2. Close and reopen VS Code
3. Ensure the file extension is exactly .spec.js (not .test.js or other variations)

Test commands don't work

Ensure:

• Vitest is installed in your project
• Your project has a valid package.json
• The test file path is correct

Import paths are incorrect

Check your configuration:

• Verify the sourceDirectory setting matches your project structure
• If using aliases, ensure useAlias is enabled and your project has alias configuration in vite.config.ts or tsconfig.json

Release Notes

1.0.0

Initial release:

• Generate test files for Vue components
• Automatic component name detection and conversion
• Context menu integration for Vue files and test files
• Command palette support
• Run individual tests from context menu
• Run tests with coverage
• Copy test commands to clipboard
• Keyboard shortcuts for test operations
• Automatic package manager detection
• Automatic TypeScript/JavaScript detection
• Configurable test directory
• Support for path aliases
• Configurable component name format
• Duplicate file protection
• Proper import path calculation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request on the extension's GitHub repository.

License

This extension is licensed under the MIT License.

Support

For issues, feature requests, or questions, please visit the extension's repository on GitHub.