Storybook 发布 v9 版本，测试支持能力显著增强

用于 UI 开发的前端工作坊 Storybook 现已正式发布第 9 版。通过与 Vitest 的合作及其他核心升级（如更扁平的依赖结构），新版本优化了性能并提升整体开发者体验，其中测试能力的改进尤为突出。

Storybook v9 在第八版测试功能的基础上进行了扩展，新增了内置可视化测试等特性，并与 Vitest 合作推出了名为“Storybook Test”的全新测试套件。

该测试套件允许开发者通过新增的测试组件一键运行所有 story 的测试，同时也具备 watch 模式，可在保存文件时自动触发测试，显著缩短本地开发的反馈周期。其核心聚焦于组件测试，提供三大测试类型：交互测试、无障碍测试和可视化测试。这些测试既可通过 Storybook 界面在本地运行，也能集成到交付流水线中。

交互测试虽已存在于多个版本中，但此前仅支持在单个 story 的标签页中运行。现在开发者既能批量运行所有 story 的交互测试，还能在侧边栏查看完整测试状态。

无障碍测试是通过 Storybook 的无障碍插件实现，以基于行业标准的 axe-core 工具进行检测。任何违反 WCAG 标准的问题都会直接在组件对应的无障碍标签页中进行展示。

可视化测试由 Chromatic 提供支持，可对组件进行视觉快照比对。该功能同样可通过侧边栏的新测试组件触发。

新增的测试组件位于左侧导航栏中，为交互、无障碍和可视化测试提供统一的视图。开发者只需点击一次即可运行全套组件测试，还能便捷查看测试覆盖率报告。

除测试增强外，Storybook 9 还包含多项重要更新：新增 Svelte 5 支持（包括 Runes 和 Snippets 等语法特性），以及被部分用户视为此次版本中最重要功能的 React Native 支持。

随版本同步发布的还有基于 Vite 的 NextJS 插件，在保留 Webpack 版本所有功能的同时，提供了完全兼容 Storybook Test 和 Vitest 的 Vite 版本。

核心架构方面，新版本采用了更扁平的依赖结构，官方称这会使安装包体积缩减 48%，并让安装速度有显著的提升。针对 Bluesky上关于“是否通过预捆绑实现”的疑问（这点可能会影响用户的应用修补依赖项），核心贡献者 Jeppe Reinhold 确认存在部分预捆绑情况，但也解释称大部分优化源自于对依赖项的移除或替换。

Storybook 是用于 UI 组件开发、测试及文档化的开源工具，支持 React、Vue、Angular，以及 Svelte 等主流 UI 库。其完整版本说明、安装指南和迁移工具请见 storybook.js.org。

原文链接：

https://www.infoq.com/news/2025/07/storybook-v9-released/