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
npm i -D @vitest/ui
Then you can start the tests with UI by passing the --ui
flag:
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.