vitest.dev / vitest
[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite. vitest.dev
test testing-tools vite
Star
Fork 0
Watch
vitest packages ui CONTRIBUTING.md
2.2 kB
Markdown
at attempts-api-prototype

@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:

# 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:

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:

VITE_PORT=12345 pnpm -C packages/ui dev:client

pnpm test --ui --open=false --api=12345

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:

pnpm -C packages/ui test:ui --ui --open=false

Start the UI dev server in browser preview mode:

BROWSER_DEV=true pnpm -C packages/ui dev:client

Open the URL printed by the UI dev server, usually http://localhost:5173/.

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:

BROWSER_DEV_PORT=63316 BROWSER_DEV=true pnpm -C packages/ui dev:client

HTML report #

Use this setup for developing static HTML report UI with Vite HMR.

HTML_REPORT_DIR=<path-to-html-report-dir> pnpm -C packages/ui dev:client

For example,

pnpm -C packages/ui test:ui --reporter=html --run
HTML_REPORT_DIR="$PWD/packages/ui/.vitest" pnpm -C packages/ui dev:client