vitest-jetbrains-plugin

Deprecated: from WebStorm 2022.3 Beta, Vitest support by default. Please refer https://blog.jetbrains.com/webstorm/2022/11/webstorm-2022-3-beta/#Vitest_support

A simple WebStorm plugin to run Vitest tests.

• Green Run icon means to run once only
• Vitest Run icon to debug test or run test with watch mode
• Test failure detection to remark run icon as red
• Vitest json reporter integration by .vitest-result.json file

  "scripts": {
    "test": "vitest --watch",
    "webstorm-integration": "vitest --watch --reporter=dot --reporter=json --outputFile=.vitest-result.json",
  },

• Vitest toolWindow to display test statistics from .vitest-result.json file

Please install Awesome Console for code link/navigation from console.

How Vitest Runner plugin resolves working directory?

• If workspaces declared in package.json, and working directory is package's directory.
• Vitest Runner will resolve proximate package.json for Vitest tested file, and working directory may be project's root directory or subdirectory of subproject.

Attention: for mono repository with subprojects independent, working directory will be subproject's directory, and Vitest Runner will use vite.config.js inside subproject.

Vitest debug support

• How about --coverage support? Please add c8 dependency in package.json and reopen the project.

{
  "devDependencies": {
   "c8": "^7.12.0"
  }
}

Screenshot

Attention

This plugin just a temp solution before official Vitest support from WebStorm. I think JetBrains people will do this job, and they know Vitest is great framework. For Vitest support in WebStorm, please vote here: https://youtrack.jetbrains.com/issue/WEB-54437

Vitest global support

Please enable globals: true for test in Vitest configuration file.

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

export default defineConfig({
    test: {
        globals: true,
    },
})

Exclude jest: jest is removed from the devDependencies, anyway, jest still resolved and installed by co dependency during npm install. You can use following solution to exclude jest:

"scripts": {
    "postinstall": "rm -rf node_modules/jest*; rm -rf node_modules/@jest"
}

Attention: Please reload(close/open) project if you enable globals: true first time.

Installation

• Using IDE built-in plugin system: https://plugins.jetbrains.com/plugin/19220-vitest-runner

  Settings/Preferences > Plugins > Marketplace > Search for "vitest" > Install Plugin

• Manually:

  Download the latest release and install it manually using Settings/Preferences > Plugins > ⚙️ > Install plugin from disk...

References

• Vitest VS Code plugin: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer
• Awesome Console plugin: https://plugins.jetbrains.com/plugin/7677-awesome-console
• Building a Plugin for WebStorm – Tutorial for JavaScript Developers: https://blog.jetbrains.com/webstorm/2021/09/building-a-plugin-for-webstorm-part-1/