[UI] cannot access exisiting coverage from "--outDir html" despite "--outDir coverage" working

[gterras]

When running tests with coverage enabled it generates both a html folder and a coverage folder.

I can access both by running :

npx vite preview --outDir html
npx vite preview --outDir coverage

Both are working as expected.

But when accessing the html ui there is a coverage button which doesn't seem to be able to access coverage data (panel is blank), there is a call to:

http://localhost:4173/coverage/assets/index-TejngHZE.js

that fails with:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

My config :

export default defineConfig({
	test: {
		include: ['**/*.e2e-spec.ts', '**/*.{,spec}.?(c|m)[jt]s?(x)'],
		globals: true,
		root: './',
		coverage: {
			enabled: true,
			include: [
				 'src/**/*.[jt]s',
			],
		},
		testTimeout: 35000,
		minWorkers: 3,
		maxWorkers: 6,
		reporters: ['default', 'html'],
	},
	plugins: [swc.vite(), tsconfigPaths()],
})

[hi-ogawa]

This is probably a current (reasonably odd) limitation as explained in https://vitest.dev/config/#coverage-reportsdirectory

To preview the coverage report in the output of HTML reporter, this option must be set as a sub-directory of the html report directory (for example ./html/coverage).

Can you try setting test.coverage.reportsDirectory: ./html/coverage?

[gterras]

Hi, thank you that solved the problem! I miss this part in the docs because I was mainly referring to https://vitest.dev/guide/coverage.html#vitest-ui (which does mention this but not in a very explicit way).