Storybook 9

Storybook 的超能力在于能够在一个地方展示 UI 的所有可能状态，从一个基本的按钮到一个晦涩的页面。这使其成为自动化测试的完美基础。

借助 Storybook 9，我们与最新一代的测试工具合作，构建了终极的组件测试工具。Vitest 提供了最快的测试运行器。Playwright 提供了无与伦比的浏览器保真度。当然，Storybook 是表达 UI 变体的最简单方法。

• ▶️ **交互测试**：通过模拟用户行为来验证功能
• ♿ **可访问性测试**：检测、诊断和修复 WCAG 违规
• 👁️ **视觉测试**：检查外观错误，精确到像素
• 🛡️ **覆盖率报告**：一目了然地了解哪些代码已测试
• 🚥 **测试小部件**：点击运行全面的测试套件

以及核心升级

• 🪶 **瘦身 48%**：安装体积更小，可选的文档和测试包
• ✍️ **故事生成**：自动编写故事的工具
• 🏷️ **基于标签的组织**：按标签过滤和分组故事
• 🌐 **全局故事**：在故事级别设置上下文（主题、视口、区域设置）
• 🏗️ **框架**：Svelte、Next.js、React Native 等框架的重大更新！

隆重推出 Storybook Test

在 Storybook 9 中，我们与生态系统中速度最快的测试运行器 Vitest 合作，创建了一个用于测试组件的卓越工具。一次性启动所有故事的测试。启用“监视模式”，以便在保存文件时只运行相关的测试。

为什么要测试组件？

单元测试验证逻辑；E2E 测试最适合几个关键流程。Storybook Test 涵盖了中间部分——您的组件。组件测试在单元测试的速度和端到端 (E2E) 测试的浏览器保真度之间达到了最佳平衡，同时避免了缺点。

Storybook 是测试组件的理想工具，因为故事已经表达了所有变体，因此为这些变体添加测试很容易。这使得您的测试套件能够以最少的维护量扩展到数千个 UI 状态。

前端测试的 3 种主要类型

在前端开发中，用户与三个关键维度进行交互。Storybook 在本地开发和 CI 中针对这些维度运行测试。

1. 交互测试——它能正常工作吗？
2. 可访问性测试——每个人都能使用吗？
3. 视觉测试——看起来对吗？

交互测试

交互测试模拟用户行为并断言组件按预期运行。Storybook 多年来一直支持此功能，但只能在导航到故事时运行这些测试。现在，您可以一键运行所有故事的所有交互测试，并在侧边栏中报告测试状态。

可访问性测试

可访问性合规性对于现代前端至关重要。但传统的无障碍测试方法太晚、太慢且成本高昂，覆盖率太低。Storybook 允许您一次性运行所有故事的可访问性测试，并直接在浏览器中检查违规行为。这样，您就可以在开发周期的早期捕获 WCAG 违规。这些检查由行业标准工具axe-core实现。

视觉测试

视觉错误会毁掉最好的前端。Storybook 通过扫描所有故事来帮助您防止错误，精确到像素地找出 UI 更改。由 Storybook 维护者开发的视觉测试云服务 Chromatic 提供支持。

测试覆盖率

Storybook 的超能力在于您可以测试应用程序中的所有 UI 状态，而不仅仅是典型路径。但您如何知道您是否测试了一切？这就是测试覆盖率的用武之地。精确计算您的组件测试执行了哪些行、函数和分支。

测试小部件：点击测试所有内容

测试小部件是 Storybook Test 的锚点。运行所有故事的所有测试——或配置要运行的类型。然后，您可以过滤侧边栏，使其仅显示带有警告或错误的 stories。每种测试类型都有自己的调试面板。由于 Storybook 在您自己的浏览器中运行，您还可以使用浏览器开发工具进行调试。

核心升级

瘦身 48%

Storybook 9 的体积不到 Storybook 8 的一半，依赖结构更扁平，可防止 `package.json` 中的冲突。更轻的重量也导致安装速度更快。

故事生成

Storybook 9 的故事生成允许您从 UI 创建和编辑故事，以捕获组件的每个状态。借助 Igor Luchenkov 的新Test Codegen 插件，您也无需编写代码来测试您的组件。您可以录制与组件的交互，添加断言，并保存您的测试……所有这些都无需离开 Storybook。

基于标签的组织

标签有助于您在大型 Storybook 中组织和过滤 stories 和组件。根据状态（alpha、stable、deprecated 等）、角色（design、dev、product）、团队、功能区域或任何适合您需求的内容来标记 stories。然后，您可以按标签过滤侧边栏，甚至使用 Steve Dodier-Lazaro 的Storybook Tag Badges 插件将标签显示为徽章。

全局故事

全局故事允许您按故事或组件设置上下文变量——例如 **主题**、**视口**、**区域设置** 或 **背景**。这使得在实际条件下测试和记录您的 UI 变得容易：暗模式、移动视图、从右到左的区域设置等等。

// Button.stories.ts
export default { component: Button };

// Normal story: theme is configurable in UI
export const Default = { args: { label: 'Button' } };

// 🌎 Force this story to be in the "dark" theme 
export const Dark = {
  ...Default,
  globals: { theme: 'dark' }
};

框架改进

Storybook 支持所有主要的 Web 前端框架，9.0 版本在所有框架中都进行了重大的改进。

Vite 驱动的 Next.js

@storybook/nextjs-vite是 Storybook Next.js 框架的一个新的、即时可用的版本。它具有与其 Webpack 版本相同的功能（导航/路由模拟、图像和字体组件等）。但由于它基于 Vite，它提供了现代化的开发体验，完全兼容 Storybook Test 和 Vitest。

Svelte 5 支持

Svelte CSF 故事格式已升级到 Svelte 5，包括对 runes 和 snippets 等新语言功能的支持。

<Story name="Default" args={{ exampleProp: true }}>
  {#snippet template(args)}
    <MyComponent {...args}>Reactive</MyComponent>
  {/snippet}
</Story>

React Native 无处不在

Storybook React Native 和 React Native Web 现在可以在您的移动项目中并排运行。这样您就可以在设备和模拟器上以高保真度开发组件。但您也可以使用 Storybook for Web 的完整功能集来记录和测试相同的 stories。

立即尝试 Storybook 9

在新项目中试用

npm create storybook@latest

如果您有现有的 Storybook 项目，请使用我们的自动化迁移向导来帮助您完成

npx storybook@latest upgrade

我们还提供了一个 迁移指南 来帮助填补空白。

下一步是什么？

鉴于 Storybook Test 和我们的捆绑包大小缩减获得了压倒性的积极预发布反馈，我们计划在 9.x 中继续加大投入。

• 仅 ESM 以进一步减小安装体积和复杂性
• 简化的模块模拟
• 故事的更好的类型安全和自动补全

要获取我们正在进行的最新视图，请查看 Storybook 的路线图。

鸣谢

核心团队

Michael Arestad、 Yann Braga、 João Cardoso、 Tom Coleman、 Norbert de Langen、 Kyle Gach、 Gert Hengeveld、 Dom Nguyen、 Valentin Palkovic、 Kasper Peulen、 Jeppe Reinhold、 Lars Rickert、 Kai Röder、 Michael Shilman (我!)、 Varun Vachhar、 Ian Van Schooten、 Daniel Williams、 Josh Wooding，以及 Vanessa Yuen

贡献者

@acusti @agentender @alirezaebrahimkhani @ashphy @audie80 @b0g3r @benmccann @dannyhw @dummdidumm @edbzn @fi3ework @filipemelo2002 @flaval @gchqdeveloper548 @ghengeveld @guria @hakshu25 @iineineno03k @irinaklimova @jamesives @jonniebigodes @jreinhold @jsmike @kasperpeulen @kenrick95 @kroeder @kylegach @larsrickert @laupetin @leeovictor @leoeuclids @makotot @masstronaut @mrginglymus @muhdhishamp @ndelangen @netroy @notwoods @okathira @rchaoz @robertisaac @sentience @shilman @sidnioulz @sookmax @spanishpear @tmeasday @tomkalina @valentinpalkovic @vanessayuenn @webpro @wlewis-formative @xeho91 @yannbf @yatishgoel