vitest/docs/guide/ui.md

title
Vitest UI | Guide

Vitest UI

Powered by Vite, Vitest also has a dev server under the hood when running the tests. This allows Vitest to provide a beautiful UI to view and interact with your tests. The Vitest UI is optional, so you'll need to install it with:

npm i -D @vitest/ui

Then you can start the tests with UI by passing the --ui flag:

vitest --ui

Then you can visit the Vitest UI at http://localhost:51204/__vitest__/

UI can also be used as a reporter. Use 'html' reporter in your Vitest configuration to generate HTML output and preview the results of your tests:

// vitest.config.ts

export default {
  test: {
    reporters: ['html']
  }
}

You can check your coverage report in Vitest UI: see Vitest UI Coverage for more details.

::: warning If you still want to see how your tests are running in real time in the terminal, don't forget to add default reporter to reporters option: ['default', 'html']. :::

::: tip To preview your HTML report, you can use the vite preview command:

npx vite preview --outDir ./html

You can configure output with outputFile config option. You need to specify .html path there. For example, ./html/index.html is the default value. :::