[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite.
vitest.dev
test
testing-tools
vite
chore(ui): guide for ui client dev with html report (#10312)
authored by
Hiroshi Ogawa
and committed by
GitHub
(May 13, 2026, 9:07 AM +0200)
c8a43c1b
964b67f1
+51
-15
+16
-1
packages/ui/CONTRIBUTING.md
+16
-1
packages/ui/CONTRIBUTING.md
···
38
38
Start a browser-mode Vitest server:
39
39
40
40
```bash
41
-
pnpm -C packages/ui test:ui --browser.headless --ui --open=false
41
+
pnpm -C packages/ui test:ui --ui --open=false
42
42
```
43
43
44
44
Start the UI dev server in browser preview mode:
···
54
54
```bash
55
55
BROWSER_DEV_PORT=63316 BROWSER_DEV=true pnpm -C packages/ui dev:client
56
56
```
57
+
58
+
## HTML report
59
+
60
+
Use this setup for developing static HTML report UI with Vite HMR.
61
+
62
+
```bash
63
+
HTML_REPORT_DIR=<path-to-html-report-dir> pnpm -C packages/ui dev:client
64
+
```
65
+
66
+
For example,
67
+
68
+
```bash
69
+
pnpm -C packages/ui test:ui --reporter=html --run
70
+
HTML_REPORT_DIR="$PWD/packages/ui/html" pnpm -C packages/ui dev:client
71
+
```
+34
-14
packages/ui/vite.config.ts
+34
-14
packages/ui/vite.config.ts
···
1
1
import type { Plugin } from 'vite'
2
+
import fs from 'node:fs'
3
+
import path from 'node:path'
2
4
import Vue from '@vitejs/plugin-vue'
3
5
import { resolve } from 'pathe'
4
6
import { presetAttributify, presetIcons, presetWind3, transformerDirectives } from 'unocss'
5
7
import Unocss from 'unocss/vite'
6
8
import { defineConfig } from 'vite'
7
-
8
-
// for debug:
9
-
// open a static file serve to share the report json
10
-
// and ui using the link to load the report json data
11
-
// const debugLink = 'http://127.0.0.1:4173/__vitest__'
12
9
13
10
export default defineConfig({
14
11
base: './',
···
41
38
],
42
39
safelist: 'absolute origin-top mt-[8px]'.split(' '),
43
40
}),
44
-
devUiScriptPlugin(),
45
-
// uncomment to see the HTML reporter preview
46
-
// {
47
-
// name: 'debug-html-report',
48
-
// apply: 'serve',
49
-
// transformIndexHtml(html) {
50
-
// return html.replace('<!-- !LOAD_METADATA! -->', `<script>window.METADATA_PATH="${debugLink}/html.meta.json.gz"</script>`)
51
-
// },
52
-
// },
41
+
process.env.HTML_REPORT_DIR
42
+
? devHtmlReportPlugin({ htmlDir: process.env.HTML_REPORT_DIR })
43
+
: devUiScriptPlugin(),
53
44
{
54
45
// workaround `crossorigin` issues on some browsers
55
46
// https://github.com/vitejs/vite/issues/6648
···
119
110
},
120
111
}
121
112
}
113
+
114
+
function devHtmlReportPlugin({ htmlDir }: { htmlDir: string }): Plugin {
115
+
const REPORT_FILE = 'html.meta.json.gz'
116
+
return {
117
+
name: 'dev-html-report',
118
+
apply(_config, env) {
119
+
return !!htmlDir && env.command === 'serve' && env.mode !== 'test'
120
+
},
121
+
async transformIndexHtml() {
122
+
return [
123
+
{
124
+
tag: 'script',
125
+
children: `window.METADATA_PATH="${REPORT_FILE}"`,
126
+
},
127
+
]
128
+
},
129
+
configureServer(server) {
130
+
server.middlewares.use(async (req, res, next) => {
131
+
const url = new URL(req.url || '', `http://localhost`)
132
+
if (url.pathname === `/${REPORT_FILE}`) {
133
+
const data = fs.readFileSync(path.join(htmlDir, REPORT_FILE))
134
+
res.end(data)
135
+
return
136
+
}
137
+
next()
138
+
})
139
+
},
140
+
}
141
+
}