diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7162bdcb4993..dcf1029cdac8 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,7 +19,6 @@ concurrency:
env:
PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/.cache/ms-playwright
- VITEST_GENERATE_UI_TOKEN: 'true'
jobs:
lint:
diff --git a/.github/workflows/cr.yml b/.github/workflows/cr.yml
index 07075c88b9f1..e953b2e8a0fe 100644
--- a/.github/workflows/cr.yml
+++ b/.github/workflows/cr.yml
@@ -41,7 +41,6 @@ jobs:
- name: Build
run: pnpm build
env:
- VITEST_GENERATE_UI_TOKEN: 'true'
VITE_TEST_WATCHER_DEBUG: 'false'
- name: Publish to StackBlitz
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index bee9a3d2523a..1aa5ea80c3ad 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -10,7 +10,6 @@ permissions:
id-token: write
env:
- VITEST_GENERATE_UI_TOKEN: 'true'
VITE_TEST_WATCHER_DEBUG: 'false'
jobs:
diff --git a/packages/ui/CONTRIBUTING.md b/packages/ui/CONTRIBUTING.md
index 847f71a03306..c22b3e26f064 100644
--- a/packages/ui/CONTRIBUTING.md
+++ b/packages/ui/CONTRIBUTING.md
@@ -1,25 +1,56 @@
-At project root, create terminals with each of the following commands:
+# @vitest/ui Development
+
+## UI
+
+Use this setup for developing UI features with Vite HMR. It serves the UI from a separate dev server, so it can differ from the exact `vitest --ui` runtime path.
+
+Start the UI dev server:
+
+```bash
+# Align with the API port configured in test/unit/vite.config.ts.
+VITE_PORT=3023 pnpm -C packages/ui dev:client
+```
+
+Start a Vitest UI/API server for any test project you want to use as the backend. For example, from the repository root this runs the `test/unit` suite with UI enabled:
+
+```bash
+pnpm test --ui --open=false
+```
+
+The UI dev server only needs a real Vitest UI/API server to connect to; the backend can be `test/unit`, `packages/ui`, or another suite.
+
+Open the URL printed by the UI dev server, usually `http://localhost:5173/`.
+
+The UI dev server connects to the Vitest UI/API server on port `51204` by default. The root `test/unit` suite uses port `3023`, so the command above sets `VITE_PORT=3023`. If you use another backend port, pass the same port to the UI dev server:
```bash
-nr ui:dev
+VITE_PORT=12345 pnpm -C packages/ui dev:client
```
```bash
-nr test --api
+pnpm test --ui --open=false --api=12345
```
-As the last command, you can use any of the available tests suites instead. Make sure that they run at 51204 port or specify a custom port with `VITE_PORT` environmental variable when running the first command. For example,
+## Browser Mode UI
+
+Use this setup for developing Browser Mode UI features with Vite HMR. It serves the Browser Mode UI from the UI dev server and injects state from a real browser-mode Vitest server.
+
+Start a browser-mode Vitest server:
```bash
-VITE_PORT=3200 nr ui:dev
+pnpm -C packages/ui test:ui --browser.headless --ui --open=false
```
+Start the UI dev server in browser preview mode:
+
```bash
-nr test --api=3200
+BROWSER_DEV=true pnpm -C packages/ui dev:client
```
-Open the browser at the URL printed by the first command. For example, `http://localhost:5173/`. If you see a connection error, it means the port is specified incorrectly.
+Open the URL printed by the UI dev server, usually `http://localhost:5173/`.
-To preview the browser tab, uncomment the "browser-dev-preview" plugin in `vite.config.ts`.
+The UI dev server fetches browser runner state from the browser runner server on port `63315` by default. If Vitest prints a different browser runner port, pass it to the UI dev server:
-To configure the browser state, update the `__vitest_browser_runner__` object in `browser.dev.js`.
+```bash
+BROWSER_DEV_PORT=63316 BROWSER_DEV=true pnpm -C packages/ui dev:client
+```
diff --git a/packages/ui/browser.dev.js b/packages/ui/browser.dev.js
deleted file mode 100644
index 2381161e627e..000000000000
--- a/packages/ui/browser.dev.js
+++ /dev/null
@@ -1,11 +0,0 @@
-window.__vitest_browser_runner__ = {
- files: [],
- config: {
- browser: {
- name: 'chrome',
- },
- },
- type: 'orchestrator',
- provider: 'playwright',
- wrapModule: () => {},
-}
diff --git a/packages/ui/client/constants.ts b/packages/ui/client/constants.ts
index bd4db857be19..3e14532c189c 100644
--- a/packages/ui/client/constants.ts
+++ b/packages/ui/client/constants.ts
@@ -2,6 +2,6 @@ export const PORT = import.meta.hot ? (import.meta.env.VITE_PORT || '51204') : l
export const HOST = [location.hostname, PORT].filter(Boolean).join(':')
export const ENTRY_URL = `${
location.protocol === 'https:' ? 'wss:' : 'ws:'
-}//${HOST}/__vitest_api__?token=${(window as any).VITEST_API_TOKEN || '0'}`
+}//${HOST}/__vitest_api__?token=${(window as any).VITEST_API_TOKEN}`
export const isReport = !!window.METADATA_PATH
export const BASE_PATH = isReport ? import.meta.env.BASE_URL : __BASE_PATH__
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 586e772c6ac2..7f5bfee461d6 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,3 +1,4 @@
+import type { Plugin } from 'vite'
import Vue from '@vitejs/plugin-vue'
import { resolve } from 'pathe'
import { presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss'
@@ -54,6 +55,7 @@ export default defineConfig({
Pages({
dirs: ['client/pages'],
}),
+ devUiScriptPlugin(),
// uncomment to see the HTML reporter preview
// {
// name: 'debug-html-report',
@@ -62,17 +64,6 @@ export default defineConfig({
// return html.replace('', ``)
// },
// },
-
- // uncomment to see the browser tab
- // {
- // name: 'browser-dev-preview',
- // apply: 'serve',
- // transformIndexHtml() {
- // return [
- // { tag: 'script', attrs: { src: './browser.dev.js' } },
- // ]
- // },
- // },
{
// workaround `crossorigin` issues on some browsers
// https://github.com/vitejs/vite/issues/6648
@@ -89,3 +80,56 @@ export default defineConfig({
outDir: './dist/client',
},
})
+
+function devUiScriptPlugin(): Plugin {
+ const UI_SCRIPT_RE = /