Invalid config from browser creator

[nickserv]

Describe the bug

I was confused when trying to use vitest init browser because it writes a nonexistent test.browser.configs config option, producing an invalid config. It seems like this should be test.browser.instances, though the documentation and TypeScript types are correct.

Reproduction

Run vitest init browser with any options, then view the generated config.

Config patch

--- vitest.bad.config.js
+++ vitest.bad.config.js
@@ -1,9 +1,9 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
        test: {
                browser: {
-                       configs: [],
+                       instances: [],
                },
        },
 });

Engineering note

There should probably be an end-to-end, smoke, or type test that asserts generated configs are valid.

System Info

System:
    OS: macOS 12.7.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 190.06 MB / 8.00 GB
    Shell: 3.7.1 - /usr/local/bin/fish
  Binaries:
    Node: 23.6.0 - /usr/local/bin/node
    npm: 11.1.0 - /usr/local/bin/npm
    pnpm: 9.11.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 17.6
  npmPackages:
    @vitest/browser: ^3.0.4 => 3.0.4 
    playwright: ^1.50.1 => 1.50.1

Used Package Manager

npm

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.

[AriPerkkio]

vitest/packages/vitest/src/create/browser/creator.ts

Lines 257 to 278 in c82387d

	const workspaceContent = [
	`import { defineWorkspace } from 'vitest/config'`,
	'',
	'export default defineWorkspace([',
	' // If you want to keep running your existing tests in Node.js, uncomment the next line.',
	` // '${relativeRoot}',`,
	` {`,
	` extends: '${relativeRoot}',`,
	` test: {`,
	` browser: {`,
	` enabled: true,`,
	` provider: '${options.provider}',`,
	options.provider !== 'preview' && ` // ${getProviderDocsLink(options.provider)}`,
	` configs: [`,
	...options.browsers.map(browser => ` { browser: '${browser}' },`),
	` ],`,
	` },`,
	` },`,
	` },`,
	`])`,
	'',
	].filter(c => typeof c === 'string').join('\n')

vitest/packages/vitest/src/create/browser/creator.ts

Lines 292 to 310 in c82387d

	const configContent = [
	`import { defineConfig } from 'vitest/config'`,
	options.frameworkPlugin ? frameworkImport : null,
	``,
	'export default defineConfig({',
	options.frameworkPlugin ? ` plugins: [${options.framework}()],` : null,
	` test: {`,
	` browser: {`,
	` enabled: true,`,
	` provider: '${options.provider}',`,
	options.provider !== 'preview' && ` // ${getProviderDocsLink(options.provider)}`,
	` configs: [`,
	...options.browsers.map(browser => ` { browser: '${browser}' },`),
	` ],`,
	` },`,
	` },`,
	`})`,
	'',
	].filter(t => typeof t === 'string').join('\n')

[nickserv]

Thanks, I read the source but forgot to include links. Is all that's needed a replacement of configs with instances here?

[AriPerkkio]

Yes, that should be all. But if you want to add the tests mentioned in Engineering note in your message, feel free to do so.

[nickserv]

I can't promise I'll have time to implement tests, but if you (or other maintainers) have any preferences among the types of tests I listed, I'm interested. FWIW I know the Vite community tends to prefer E2E tests, and that would probably be the most robust option.

[AriPerkkio]

We prefer e2e-tests too. In these test cases we are running Vitest either via CLI bin or using the Vitest's Node API. For this bug we should add test case to test/cli/test/, that is somewhat similar as:

vitest/test/cli/test/tty.test.ts

Lines 4 to 5 in 191ef9e

	test('run mode does not get stuck when TTY', async () => {
	const { vitest } = await runVitestCli('--root', 'fixtures/tty')