How should I configure my custom reporter in Vitest UI?

[zhangtao25]

Clear and concise description of the problem

This is our custom HTML reporter, and I want to use it in the coverage section of Vitest UI.

Suggested solution

It is recommended to configure the coverage reporter for coverage reports.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[AriPerkkio]

This is not possible. The html reporter is hard-coded here:

vitest/packages/ui/node/index.ts

Lines 67 to 102 in 9e40437

	function resolveCoverageFolder(ctx: Vitest) {
	const options = ctx.config
	const htmlReporter
	= options.api?.port && options.coverage?.enabled
	? toArray(options.coverage.reporter).find((reporter) => {
	if (typeof reporter === 'string') {
	return reporter === 'html'
	}
	return reporter[0] === 'html'
	})
	: undefined
	if (!htmlReporter) {
	return undefined
	}
	// reportsDirectory not resolved yet
	const root = resolve(
	ctx.config?.root || options.root || process.cwd(),
	options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory,
	)
	const subdir
	= Array.isArray(htmlReporter)
	&& htmlReporter.length > 1
	&& 'subdir' in htmlReporter[1]
	? htmlReporter[1].subdir
	: undefined
	if (!subdir || typeof subdir !== 'string') {
	return [root, `/${basename(root)}/`]
	}
	return [resolve(root, subdir), `/${basename(root)}/${subdir}/`]
	}

vitest/packages/ui/node/index.ts

Lines 30 to 52 in 9e40437

	const coverageFolder = resolveCoverageFolder(ctx)
	const coveragePath = coverageFolder ? coverageFolder[1] : undefined
	if (coveragePath && base === coveragePath) {
	throw new Error(
	`The ui base path and the coverage path cannot be the same: ${base}, change coverage.reportsDirectory`,
	)
	}
	if (coverageFolder) {
	server.middlewares.use(
	coveragePath!,
	sirv(coverageFolder[0], {
	single: true,
	dev: true,
	setHeaders: (res) => {
	res.setHeader(
	'Cache-Control',
	'public,max-age=0,must-revalidate',
	)
	},
	}),
	)
	}

[zhangtao25]

When configuring an HTML reporter, if I also configure my own custom HTML reporter, it can overwrite the previous HTML report.

https://github.com/canyon-project/canyon-test/blob/main/vitest.config.ts#L10

[AriPerkkio]

That actually works by accident - the reporters are looped in the order they are defined in configuration. If you are saving the reports in same directory as built-in html does, it will just overwrite the results.

vitest/packages/coverage-v8/src/provider.ts

Lines 129 to 138 in 9e40437

	for (const reporter of this.options.reporter) {
	// Type assertion required for custom reporters
	reports
	.create(reporter[0] as Parameters<typeof reports.create>[0], {
	skipFull: this.options.skipFull,
	projectRoot: this.ctx.config.root,
	...reporter[1],
	})
	.execute(context)
	}

I think we should have a better solution for this. Maybe something like

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    ui: {
      coverageDirectory: "/somepath"
    }
  },
});

... and if that's defined, use it instead of trying to resolve the path from coverage options.
The current resolving logic should be used when coverageDirectory is not defined for backwards compatibility.