[Bug]: experimental test addon ^8.5.0 prevents custom vitest commands being registered

[leemason]

Describe the bug

The changes in 8.5.0 to the vite plugin which updates the vitest config overwrites the commands setting applied in a workspace file.

There is a workaround which is to register a plugin after the testStorybook plugin and inject the commands there, but this shouldnt be required and should retain the existing commands registered:

import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
import { defineWorkspace } from "vitest/config";
import * as commands from "./.storybook/vitest.commands";

export default defineWorkspace([
  "vite.config.ts",
  {
    extends: "vite.config.ts",
    plugins: [
      storybookTest({ configDir: ".storybook" }),
      // having to register my commands here because merged config has them removed.
      {
        enforce: "pre",
        name: "patch-vitest-browser-commands",
        config(config) {
          config.test.browser.commands = {
            ...config.test.browser.commands,
            ...commands,
          };
          return config;
        },
      },
    ],
    test: {
        //...
      browser: {
        // these are ignore/removed
        commands
      }
    }
  }
]);

Reproduction link

na

Reproduction steps

1. register commands in vitest browser config object
2. note these commands are not available during tests

System

Storybook Environment Info:

  System:
    OS: macOS 15.2
    CPU: (16) arm64 Apple M4 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.6.0 - ~/.nvm/versions/node/v23.6.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v23.6.0/bin/yarn <----- active
    npm: 10.9.2 - ~/.nvm/versions/node/v23.6.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.2
  npmPackages:
    @storybook/addon-a11y: ^8.5.1 => 8.5.1 
    @storybook/addon-coverage: ^1.0.4 => 1.0.5 
    @storybook/addon-essentials: ^8.5.1 => 8.5.1 
    @storybook/addon-links: ^8.5.1 => 8.5.1 
    @storybook/blocks: ^8.5.1 => 8.5.1 
    @storybook/builder-vite: ^8.5.1 => 8.5.1 
    @storybook/experimental-addon-test: ^8.5.1 => 8.5.1 
    @storybook/manager-api: ^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 
    @storybook/theming: ^8.5.1 => 8.5.1 
    eslint-plugin-storybook: ^0.11.1 => 0.11.2 
    storybook: ^8.5.1 => 8.5.1 
    storybook-addon-data-theme-switcher: ^1.0.0 => 1.0.0 
    storybook-addon-tag-badges: ^1.2.1 => 1.4.0

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be an issue in the @storybook/experimental-addon-test Vitest plugin where the test configuration is overwriting custom commands instead of merging them. The fix would be in code/addons/test/src/vitest-plugin.ts to ensure the browser commands are merged rather than replaced.

Specific implementation:

1. Modify the config merge logic in the storybookTest plugin to preserve existing browser commands:

config(config) {
  return {
    ...config,
    test: {
      ...config.test,
      browser: {
        ...config.test?.browser,
        commands: {
          ...config.test?.browser?.commands,
          ...browserCommands
        }
      }
    }
  };
}

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