fix: generate a separate config for "vitest init browser" instead of a workspace file (#7934)

Author: sheremet-va

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

@@ -257,38 +257,6 @@ function fail() {
   process.exitCode = 1
 }
 
-async function generateWorkspaceFile(options: {
-  configPath: string
-  rootConfig: string
-  provider: string
-  browsers: string[]
-}) {
-  const relativeRoot = relative(dirname(options.configPath), options.rootConfig)
-  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)}`,
-    `        instances: [`,
-    ...options.browsers.map(browser => `        { browser: '${browser}' },`),
-    `        ],`,
-    `      },`,
-    `    },`,
-    `  },`,
-    `])`,
-    '',
-  ].filter(c => typeof c === 'string').join('\n')
-  await writeFile(options.configPath, workspaceContent)
-}
-
 async function generateFrameworkConfigFile(options: {
   configPath: string
   framework: string
@@ -318,7 +286,6 @@ async function generateFrameworkConfigFile(options: {
     `})`,
     '',
   ].filter(t => typeof t === 'string').join('\n')
-  // this file is only generated if there is already NO root config which is an edge case
   await writeFile(options.configPath, configContent)
 }
 
@@ -403,7 +370,6 @@ export async function create(): Promise<void> {
     return fail()
   }
 
-  // TODO: allow multiselect
   const { browsers } = await prompt({
     type: 'multiselect',
     name: 'browsers',
@@ -474,19 +440,24 @@ export async function create(): Promise<void> {
   log()
 
   if (rootConfig) {
-    let browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace.${lang}`)
-    if (existsSync(browserWorkspaceFile)) {
-      log(c.yellow('⚠'), c.yellow('A workspace file already exists. Creating a new one for the browser tests - you can merge them manually if needed.'))
-      browserWorkspaceFile = resolve(process.cwd(), `vitest.workspace.browser.${lang}`)
-    }
-    scriptCommand = `vitest --workspace=${relative(process.cwd(), browserWorkspaceFile)}`
-    await generateWorkspaceFile({
-      configPath: browserWorkspaceFile,
-      rootConfig,
+    const configPath = resolve(dirname(rootConfig), `vitest.browser.config.${lang}`)
+    scriptCommand = `vitest --config=${relative(process.cwd(), configPath)}`
+    await generateFrameworkConfigFile({
+      configPath,
+      framework,
+      frameworkPlugin,
       provider,
       browsers,
     })
-    log(c.green('✔'), 'Created a workspace file for browser tests:', c.bold(relative(process.cwd(), browserWorkspaceFile)))
+    log(
+      c.green('✔'),
+      'Created a new config file for browser tests:',
+      c.bold(relative(process.cwd(), configPath)),
+      // TODO: Can we modify the config ourselves?
+      '\nSince you already have a Vitest config file, it is recommended to copy the contents of the new file ',
+      'into your existing config located at ',
+      c.bold(relative(process.cwd(), rootConfig)),
+    )
   }
   else {
     const configPath = resolve(process.cwd(), `vitest.config.${lang}`)
@@ -497,7 +468,7 @@ export async function create(): Promise<void> {
       provider,
       browsers,
     })
-    log(c.green('✔'), 'Created a config file for browser tests', c.bold(relative(process.cwd(), configPath)))
+    log(c.green('✔'), 'Created a config file for browser tests:', c.bold(relative(process.cwd(), configPath)))
   }
 
   log()

test/cli/fixtures/browser-init/package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "test:browser": "vitest --workspace=vitest.workspace.ts"
+    "test:browser": "vitest --config=vitest.browser.config.ts"
   },
   "dependencies": {
     "vitest": "latest"

test/cli/test/init.test.ts

@@ -47,29 +47,24 @@ test('initializes project', async () => {
     [
       "package.json",
       "vitest-example",
+      "vitest.browser.config.ts",
       "vitest.config.ts",
-      "vitest.workspace.ts",
     ]
   `)
 
-  expect(await getFileContent('/vitest.workspace.ts')).toMatchInlineSnapshot(`
-    "import { defineWorkspace } from 'vitest/config'
-
-    export default defineWorkspace([
-      // If you want to keep running your existing tests in Node.js, uncomment the next line.
-      // 'vitest.config.ts',
-      {
-        extends: 'vitest.config.ts',
-        test: {
-          browser: {
-            enabled: true,
-            provider: 'preview',
-            instances: [
-            ],
-          },
+  expect(await getFileContent('/vitest.browser.config.ts')).toMatchInlineSnapshot(`
+    "import { defineConfig } from 'vitest/config'
+
+    export default defineConfig({
+      test: {
+        browser: {
+          enabled: true,
+          provider: 'preview',
+          instances: [
+          ],
         },
       },
-    ])
+    })
     "
   `)