vitest/ui coverage page have invalid iframe url when running on preview mode (pre-generated report)

[akcyp]

Describe the bug

UI converage page works well in "test development mode", but fails to load on generated report (after running vite preview --outDir html).
Root cause: https://github.com/vitest-dev/vitest/blob/main/packages/ui/client/composables/navigation.ts#L22

Another minor issue:
CI=true vitest --ui should not open browser

Reproduction

import { defineConfig } from "vitest/config";
export default defineConfig({
  test: {
    coverage: {
      enabled: true,
      reporter: ['html'],
      reportsDirectory: 'html/coverage',
      provider: 'istanbul',
      all: true,
    },
    reporters: ['html'],
  },
});

# package.json
{
  "scripts": {
    "test": "vitest",
    "preview": "vite preview"
  }
}

CI=true bun run test --ui
bun run preview --outDir html

Also it would be nice to have iframe url somehow obtained from coverage.reportsDirectory, for example if coverage.reportsDirectory is located under <rootDir>/html (vitest html reporter root dir), then relative url is calculated.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
    Memory: 5.32 GB / 7.63 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  npmPackages:
    @vitest/browser: ^0.34.4 => 0.34.4 
    @vitest/coverage-istanbul: ^0.34.4 => 0.34.4 
    @vitest/ui: ^0.34.4 => 0.34.4 
    vite: ^4.4.5 => 4.4.9 
    vitest: ^0.34.4 => 0.34.4 

Used Package Manager

bun

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[kitsun-ho]

I'm having the same problem as you.
When executing vitest --ui, the port of vitest ui != the port of iframe, after I corrected the iframe port in F12, it can be displayed, but I don't know how to fix it in setting.

// vite.config.ts

test: {
  include: ['**/*.{test,spec}.?(c|m)[jt]s?(x)'],
  environment: 'jsdom',
  globals: true,
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
  },
  coverage: {
    provider: 'istanbul',
    enabled: true,
    reportOnFailure: true,
    perFile: true,
  },
},

// package.json

"scripts": {
  "test:unit-ui": "vitest --ui",
  "test:unit": "vitest",
  "test:unit-report": "vitest run --coverage"
},

[kitsun-ho]

I think I found a solution, setting test.api, It look like the port is occupied.

// vite.config.ts

test: {
  include: ['**/*.{test,spec}.?(c|m)[jt]s?(x)'],
  environment: 'jsdom',
  globals: true,
  api: 51205,
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
  },
  coverage: {
    provider: 'istanbul',
    enabled: true,
    reportOnFailure: true,
    perFile: true,
  },
},