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:

bash

npm i -D @vitest/ui

npm i -D @vitest/ui

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

bash

vitest --ui

vitest --ui

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

Since Vitest 0.26.0, 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']
  }
}

// vitest.config.ts

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

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 vite preview command:

npx vite preview --outDir ./html

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.

Vitest UI #

Vitest UI