[Bug]: Addon-Test: Vitest 3 - Error: Cannot define a nested project for a chromium browser.

[adriantrunzo]

Describe the bug

Related to #30308.

When using the new browser.instances syntax in the Vitest 3 configuration I see the following error:

Error: Cannot define a nested project for a chromium browser. The project name "storybook (chromium)" was already defined. If you have multiple instances for the same browser, make sure to define a custom "name". All projects in a workspace should have unique names. Make sure your configuration is correct.

I am aware of #30309 and its inclusion in 8.5.1, but it doesn't actually address the issue. That pull request just modifies the Vitest config template used when adding @storybook/experimental-addon-test to an existing project with Vitest 3.

Reproduction link

https://github.com/adriantrunzo/sb-vitest-3-bug-1

Reproduction steps

1. Clone the repository in the reproduction link
2. Run pnpm vitest --project=storybook
3. Verify you see the command fail with the error text pasted in the description above.

I created the reproduction using the following steps:

1. pnpm dlx storybook@latest init
2. Choose template React + Vite (TS)
3. pnpm exec storybook add @storybook/experimental-addon-test
4. Choose yes to remove and unregister @storybook/addon-interactions
5. Modify vitest.workspace.ts to change the test.browser clause from:

      browser: {
        enabled: true,
        headless: true,
        name: 'chromium',
        provider: 'playwright',
      },

to

      browser: {
        enabled: true,
        headless: true,
        instances: [{ browser: "chromium" }],
        provider: 'playwright',
      },

The change in vitest.workspace.ts matches the Vitest documentation and the code in #30309.

System

Storybook Environment Info:

  System:
    OS: macOS 15.2
    CPU: (12) arm64 Apple M2 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.local/state/fnm_multishells/44558_1737647838338/bin/node
    npm: 10.9.0 - ~/.local/state/fnm_multishells/44558_1737647838338/bin/npm
    pnpm: 9.15.3 - ~/.local/state/fnm_multishells/44558_1737647838338/bin/pnpm <----- active
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.2
  npmPackages:
    @storybook/addon-essentials: ^8.5.1 => 8.5.1
    @storybook/addon-onboarding: ^8.5.1 => 8.5.1
    @storybook/blocks: ^8.5.1 => 8.5.1
    @storybook/experimental-addon-test: ^8.5.1 => 8.5.1
    @storybook/react: ^8.5.1 => 8.5.1
    @storybook/react-vite: ^8.5.1 => 8.5.1
    @storybook/test: ^8.5.1 => 8.5.1
    eslint-plugin-storybook: ^0.11.2 => 0.11.2
    storybook: ^8.5.1 => 8.5.1

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be an issue with project name collision in the Vitest configuration. The fix requires modifying the project name in vitest.workspace.ts: ts browser: { enabled: true, headless: true, instances: [{ browser: 'chromium', name: 'storybook-chromium' // Add custom name here }], provider: 'playwright', } The root cause is in @storybook/test-runner where the default project name is generated. This needs to be updated to handle the new Vitest 3 instances syntax properly.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[adriantrunzo]

I tried the suggestion from Geptile above, but it also fails with the same error:

export default defineWorkspace([
  'vite.config.ts',
  {
    extends: 'vite.config.ts',
    plugins: [
      // The plugin will run tests for the stories defined in your Storybook config
      // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
      storybookTest({ configDir: path.join(dirname, '.storybook') })
    ],
    test: {
      name: 'storybook',
      browser: {
        enabled: true,
        headless: true,
        instances: [{ browser: "chromium", name: 'storybook-chromium' }],
        provider: 'playwright',
      },
      setupFiles: ['.storybook/vitest.setup.ts'],
    },
  },
]);

Error: Cannot define a nested project for a chromium browser. The project name "storybook-chromium" was already defined. If you have multiple instances for the same browser, make sure to define a custom "name". All projects in a workspace should have unique names. Make sure your configuration is correct.

[valentinpalkovic]

Hi @adriantrunzo

Thank you for reporting. We messed up the 8.5.1 release and forgot to include the fix in #30309 properly. I will put together another 8.5.2 release now containing the fix.

[valentinpalkovic]

Fixed by #30309 and bugfix was released with 8.5.2

[Sidnioulz]

@valentinpalkovic is this supposed to also fix the error when running yarn test in the monorepo's code folder?