b8f34eb8ca
* feat: vitest html report * chore: copy ui to vitest dist * feat: report copy ui dist * feat: ui report version builder * fix: copy file * chore: remove * feat: html metadata path * feat: add declare * feat: static file client * feat: mock rpc * fix: mock error * chore: update meta * chore: compress json * chore: comment * chore: update merge config * chore: lock * feat: remove all control command from ui * chore: remove * feat: report command * feat: version tag * chore: reset lock file * feat: remove hooks * chore: update * fix: runningPromise * chore: update debug mode and disable click on transform * docs: report * chore: remove the version mark * feat: report * fix: lint * chore: copy ui from @vitest/ui * chore: export report from ui * chore: update * fix: lint * docs: ui html report * feat: ensurePackageInstalled * update * feat: more info * chore: improve documentation and tests * chore: fix UI bundle size * chore: ui tests * perf: remove output report using the global variable to judge report mode * chore: update * fix: build * fix: report * fix: parse * chore: fix html reporters test * chore: don't store config in html reporter test * chore: update ui docs * feat: log * chore: fix tests * test: fix html reporter tests * docs add vitest fo UI reporter Co-authored-by: Vladimir <sleuths.slews0s@icloud.com>
1.6 KiB
| 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__/
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 results of your tests:
// 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 --base __vitest__ --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.
:::