Storybook项目中Vitest 3浏览器测试配置问题解析

在Storybook 8.5.1版本中，当开发者尝试使用Vitest 3的新browser.instances语法配置浏览器测试时，会遇到一个命名冲突的错误提示。这个问题主要出现在使用@storybook/experimental-addon-test插件进行组件测试的场景中。

问题现象

当开发者在Vitest配置文件中使用如下配置时：

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

系统会抛出错误："Cannot define a nested project for a chromium browser. The project name 'storybook (chromium)' was already defined"。这个错误表明Vitest检测到了重复的项目名称定义。

问题根源

该问题源于Storybook测试运行器(@storybook/test-runner)与Vitest 3新特性的兼容性问题。在Vitest 3中，browser.instances语法是官方推荐的新配置方式，但Storybook的默认配置没有正确处理这种新语法下的项目命名规则。

解决方案

Storybook团队在8.5.2版本中修复了这个问题。修复方案包括：

1. 更新了Vitest配置模板，使其兼容Vitest 3的新语法
2. 确保在生成项目名称时考虑了浏览器实例的命名空间

对于开发者而言，正确的配置方式应该是：

browser: {
  enabled: true,
  headless: true,
  instances: [{ 
    browser: "chromium",
    name: 'storybook-chromium' // 显式指定唯一名称
  }],
  provider: 'playwright',
}

技术背景

Vitest 3引入的browser.instances配置允许开发者更灵活地定义多个浏览器实例进行测试。每个实例都需要有唯一的名称标识，以避免测试运行时的冲突。Storybook的测试运行器需要适应这种新的配置方式，确保生成的默认名称不会与其他测试项目冲突。

最佳实践

对于使用Storybook进行组件测试的开发者，建议：

1. 确保使用Storybook 8.5.2或更高版本
2. 在Vitest配置中显式指定浏览器实例名称
3. 定期检查Vitest和Storybook的版本兼容性
4. 当遇到类似命名冲突问题时，优先考虑是否为版本兼容性问题

这个问题展示了前端测试工具链中常见的兼容性挑战，也提醒开发者在升级工具版本时需要关注配置方式的变更。