Skip to content

Latest commit

 

History

History
51 lines (35 loc) · 1.7 KB

ui.md

File metadata and controls

51 lines (35 loc) · 1.7 KB
Raw
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__/

Vitest UI

Vitest UI

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']
  }
}

Since Vitest 0.31.0, you can check your coverage report in Vitest UI: check 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 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. :::