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.jsonfile
"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.jsonfile
Please install Awesome Console for code link/navigation from console.
- If
workspacesdeclared inpackage.json, and working directory is package's directory. - Vitest Runner will resolve proximate
package.jsonfor 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.
- How about
--coveragesupport? Please addc8dependency in package.json and reopen the project.
{
"devDependencies": {
"c8": "^7.12.0"
}
}
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
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.
-
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...
- 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/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent