From 14077ca968eaa00102ffe72c0c313227efb55656 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Thu, 21 May 2026 22:22:17 +0900 Subject: [PATCH 1/2] feat(reporter): support html reporter single file output (#10235) Co-authored-by: Codex Co-authored-by: Claude Opus 4.7 (1M context) --- api/advanced/artifacts.md | 6 ++++-- guide/reporters.md | 23 +++++++++++++++++++++++ guide/ui.md | 13 ++++++++++++- 3 files changed, 39 insertions(+), 3 deletions(-) diff --git a/api/advanced/artifacts.md b/api/advanced/artifacts.md index 114e9945..e7c2faf7 100644 --- a/api/advanced/artifacts.md +++ b/api/advanced/artifacts.md @@ -78,7 +78,7 @@ If your custom artifact narrows the `attachments` type (e.g. to a tuple), includ export interface TestAttachment { /** MIME type of the attachment (e.g., 'image/png', 'text/plain') */ contentType?: string - /** File system path to the attachment */ + /** Local file path or external HTTP(S) URL to the attachment. Relative paths are resolved from the project root. */ path?: string /** Inline attachment content as a string or raw binary data */ body?: string | Uint8Array @@ -94,7 +94,9 @@ export interface TestAttachment { The `TestAttachment` interface represents a file or data attachment associated with a test artifact. -Attachments can be either file-based (via `path`) or inline content (via `body`). The `contentType` helps consumers understand how to interpret the attachment data. +Attachments can be either path-based (via `path`) or inline content (via `body`). The `contentType` helps consumers understand how to interpret the attachment data. + +Attachment `path` can point to a local file or an external `http`/`https` URL. Relative local paths are resolved from the project root. Local files are copied into Vitest's attachments directory before reporters receive them. External URLs are preserved as-is. If you pass a string `body`, Vitest assumes it is already base64-encoded unless you set `bodyEncoding: 'utf-8'`. When you pass `body` as a `Uint8Array`, Vitest automatically encodes it as base64. The `bodyEncoding` option only applies to inline `body` attachments, not `path` attachments. diff --git a/guide/reporters.md b/guide/reporters.md index 0eb70bc1..e060753c 100644 --- a/guide/reporters.md +++ b/guide/reporters.md @@ -522,6 +522,29 @@ export default defineConfig({ ``` ::: +Set `singleFile` to generate a self-contained HTML report: + +```ts [vitest.config.ts] +export default defineConfig({ + test: { + reporters: [ + ['html', { singleFile: true }], + ], + }, +}) +``` + +When `singleFile` is enabled, Vitest inlines the UI assets, metadata, and test attachments into a single self-contained `index.html`. This makes the report easy to share, upload, or download as one artifact instead of preserving the whole `html` output directory. + +::: warning +`singleFile` has two caveats: + +- The file can grow very large because everything is embedded inline — slow to open, memory-hungry, and possibly over the size limits of artifact viewers or static hosts. +- Coverage HTML reports are not inlined yet and remain as separate files. + +Prefer the default multi-file report when the suite has many or large attachments, or when you need coverage included in the bundle. +::: + ::: tip This reporter requires installed [`@vitest/ui`](/guide/ui) package. ::: diff --git a/guide/ui.md b/guide/ui.md index d6c15437..4dfa0b4a 100644 --- a/guide/ui.md +++ b/guide/ui.md @@ -53,11 +53,13 @@ npx vite preview --outDir ./html You can configure output with [`outputFile`](/config/outputfile) config option. You need to specify `.html` path there. For example, `./html/index.html` is the default value. ::: +If you need a portable report that can be opened or shared as one file, see [`singleFile`](/guide/reporters#html-reporter) in the HTML reporter documentation. + ::: tip To view the HTML report from CI, for example in GitHub Actions, upload the output directory as an artifact: ```yaml -- uses: actions/upload-artifact@v4 +- uses: actions/upload-artifact@v7 id: upload-report with: name: vitest-report @@ -68,6 +70,15 @@ To view the HTML report from CI, for example in GitHub Actions, upload the outpu ``` This adds a link to the job summary. Click it to open the report in [Vitest Viewer](https://viewer.vitest.dev/) directly in the browser. You can also download the artifact manually and extract it, then run `vite preview` locally as above. + +When you use `singleFile: true`, you can upload the report as a single file and it will become viewable directly GitHub artifacts with `archive: false` option: + +```yaml +- uses: actions/upload-artifact@v7 + with: + path: html/index.html + archive: false +``` ::: ## Module Graph From bc77e0d1f5b79b0acb21c7eae0be3a96ae7ed249 Mon Sep 17 00:00:00 2001 From: noise Date: Fri, 22 May 2026 11:55:11 +0800 Subject: [PATCH 2/2] docs(cn): dissolve the conflict --- guide/reporters.md | 2 +- guide/ui.md | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/guide/reporters.md b/guide/reporters.md index 572e4954..01e8de80 100644 --- a/guide/reporters.md +++ b/guide/reporters.md @@ -536,7 +536,7 @@ export default defineConfig({ ``` ::: - + Set `singleFile` to generate a self-contained HTML report: ```ts [vitest.config.ts] diff --git a/guide/ui.md b/guide/ui.md index dae88742..9cd9d7f7 100644 --- a/guide/ui.md +++ b/guide/ui.md @@ -52,7 +52,7 @@ npx vite preview --outDir ./html 你可以使用 [`outputFile`](/config/outputfile) 配置选项配置输出。你需要在那里指定 `.html` 路径。例如，`./html/index.html` 是默认值。 ::: - + If you need a portable report that can be opened or shared as one file, see [`singleFile`](/guide/reporters#html-reporter) in the HTML reporter documentation. ::: tip @@ -69,11 +69,8 @@ If you need a portable report that can be opened or shared as one file, see [`si run: echo "[View HTML report](https://viewer.vitest.dev/?url=${{ steps.upload-report.outputs.artifact-url }})" >> $GITHUB_STEP_SUMMARY ``` -<<<<<<< HEAD 这会在任务摘要中添加一个链接。点击该链接即可在浏览器中直接通过 [Vitest Viewer](https://viewer.vitest.dev/) 查看报告。你也可以手动下载产物并解压，然后按照前文所述在本地运行 `vite preview` 命令。 -======= -This adds a link to the job summary. Click it to open the report in [Vitest Viewer](https://viewer.vitest.dev/) directly in the browser. You can also download the artifact manually and extract it, then run `vite preview` locally as above. - + When you use `singleFile: true`, you can upload the report as a single file and it will become viewable directly GitHub artifacts with `archive: false` option: ```yaml @@ -82,7 +79,6 @@ When you use `singleFile: true`, you can upload the report as a single file and path: html/index.html archive: false ``` ->>>>>>> 14077ca968eaa00102ffe72c0c313227efb55656 ::: ## 模块图 {#module-graph}