Vitest

1. Make sure you have Node.js on your computer.

2. Make sure the Vite plugin is enabled in the settings. Press Ctrl+Alt+S to open settings and then select Plugins. Click the Installed tab. In the search field, type Vite. For more information about plugins, refer to Managing plugins.

• In your command-line shell or in the embedded Terminal (Alt+F12) , type:

  npm install --save-dev vitest

Run or debug a single test from the editor

• Click or in the gutter and select Run <test_name> from the list.

  

  View the results of running your tests in the Run tool window. For failed tests, information on where an error occurred and what caused it is displayed.

  

  You can also see whether a test has passed or failed right in the editor, thanks to the test status icons and in the gutter.

  

• To debug a test, set a breakpoint inside it, click or in the gutter and select Debug <test_name> from the list.

  

  In the Debug tool window, examine the suspended test and step through it.

  

Create a Vitest run configuration

1. Open the Run/Debug Configuration dialog (Run | Edit Configurations in the main menu), click in the left-hand pane, and select Vitest from the list. The Run/Debug Configuration: Vitest dialog opens.

2. Specify the Node.js runtime to use.

   If you choose the Project alias, WebStorm will automatically use the project default interpreter from the Node runtime field on the JavaScript Runtime page . In most cases, WebStorm detects the project default runtime and fills in the field itself.

   You can also choose another configured local or remote interpreter or click and configure a new one.

   For more information, refer to Configuring remote Node.js runtimes, Configuring a local Node.js runtime, and Using Node.js on Windows Subsystem for Linux.

   Optionally specify the Node.js-specific option parameters and the environment variables to be passed to Node.js.

   The definitions of variables are displayed in the Environment variables field with semicolons (;) as separators, for example:

   • NODE_PATH

     A list of additional directories to search when resolving modules. To separate directories in a list, use colon (:) on macOS or Linux, use semicolon (;) on Windows.

   • NODE_MODULE_CONTEXTS

     Set to 1 to load modules in their own global contexts.

   • NODE_DISABLE_COLORS

     Set to 1 to disable colors in the REPL.

   

   Alternatively, click Browse to the right of the field and configure a list of variables in the Environment Variables dialog, that opens:

   • Use , , and buttons to manage the list of custom variables.

   • The dialog also shows a list of available system environment variables. Clear the Include system environment variables checkbox if you don't want to use the system environment variables for the current configuration.

   • Click OK, when ready.

3. Specify the location of the vitest package.

4. Specify the working directory of the application. By default, the Working directory field shows the project root folder. To change this predefined setting, specify the path to the desired folder.

5. Specify the tests to run. This can be a specific test or suite, an entire test file, or a folder with test files.

6. By default, vite.config.ts is used. If vite.config.ts is missing, or you want to use a custom configuration, specify the vitest.config.ts to use. Learn more from the Vitest official website.

7. Optionally:

   Configure rerunning tests automatically on changes in them or in the related source files. To do that, add the --watch flag in the Vitest options field.

   You can also add other Vitest options. For more information, refer to the Vitest official website.

8. Optionally:

   In the Node options field, type the Node.js-specific command-line options to be passed to the Node.js executable file. The acceptable options are:

   • Use --require coffeescript/register to have CoffeeScript files compiled into JavaScript on the fly during run.

     This mode requires that the register.js file, which is a part of the coffeescript package, is located inside your project. Therefore, make sure you have the coffeescript package installed locally as described in Install the CoffeeScript compiler.

   • Use --inspect or --inspect-brk parameter for Chrome Debugging Protocol support.

Run tests via a run configuration

1. Select the Vitest run/debug configuration from the list of configurations and click in the list or on the toolbar.

   

2. Monitor test execution and analyze test results in the Test Runner tab of the Run tool window. For more information, refer to Explore test results.

   To debug tests, set breakpoints where necessary, select the run/debug configuration, and click .

   

Rerun failed tests

• Click on the test results toolbar. WebStorm will execute all the tests that failed during the previous session.

  

• To rerun a specific failed test, select Run <test name> on its context menu.

For more information, refer to Rerunning tests.

Rerun updated tests automatically (--watch mode)

1. Open a Vitest run/debug configuration or create a new one as described above.

2. In the Vitest options field, type --watch. In the autogenerated All tests configuration, the --watch option is already specified.

3. Launch the run/debug configuration. If some tests fail, you can update them or related test subjects without stopping the test session. As soon as your changes are saved, WebStorm detects them and reruns the affected tests.

   In the example below, the test at line 29 of vue.test.ts fails. With the --watch option, the test is rerun after you replace '4 x 4 = 18' with '4 x 4 = 16' in vue.test.ts an save the changes with Ctrl+S or move the focus from WebStorm.

   

Enable code coverage for Vitest

Install @vitest/coverage-v8 or istanbul. To do that, open the built-in Terminal Alt+F12 and type one of the following:

• npm install --save-dev @vitest/coverage-v8

• npm install --save-dev @vitest/coverage-istanbul.

Learn more from Coverage on the Vitest official website.

Run tests with coverage

1. Run a specific suite or a test with coverage from the editor: click or in the gutter and select Run <test_name> with Coverage from the list.

   

   Alternatively:

   Create a Vitest run/debug configuration as described above. Select the Vitest run/debug configuration from the list on the main toolbar and click  to the right of the list.

2. Monitor the code coverage in the Coverage tool window. The report shows how many files were covered with tests and the percentage of covered lines in them. From the report you can jump to the file and see what lines were covered – marked green – and what lines were not covered – marked red: