Storybook 8.4 新功能详解：更小、更快、更强大！

一键在浏览器里进行组件测试

Storybook 是用来构建、测试和记录 UI 组件的行业标准工具。每周有数十万的开发者使用它，其中包括沃尔沃、Netflix 和 Chewy 的团队成员。

在 Storybook 8.4 中，我们打造了最佳的开发人员体验，用于在浏览器中测试前端代码并调试。这建立在我们与 Vitest 合作的 [组件测试] 工作基础上。

• ▶️ 一键浏览器组件测试功能
• 🫧 包体积减少50%，锁定文件大小缩减75%
• 5️⃣ 版本5的Svelte 5 和 Svelte CSF
• ⚛️ React Native Storybook 8
• 🏷️ 标签及筛选故事
• 💯 更多数百项改进

一键测试组件

故事书测试是我们的前端测试愿景。通过测试组件而非整个应用，我们可以在端到端（E2E）测试的真实度和单元测试的速度及可靠性之间取得平衡。

这个体验的核心在于一个可以在 Storybook 中实时运行测试并显示结果的 UI。而这正是我们在 Storybook 8.4 中提供的功能。

只需轻轻一点，现在就可以在您的所有故事中运行 Vitest 组件测试了。

当测试失败的时候，你可以逐一排查并修复这些失败，使用 Storybook 的时间旅行调试器。

它也支持看守模式，所以当有问题发生时，你就会收到通知。

Chromatic的Visual Test插件也可以正常使用。想了解更多关于新测试界面的信息，请参阅官方文档。

我们将包的大小减半。

与 8.0 版本相比，8.4 版本将 Storybook 的总体安装体积减少了超过 50%，锁文件的增加量减少了超过 75%。尽管我们在 2023 年的《JavaScript 状态》调查中表现不错，但用户最常提出的要求之一就是让 Storybook 更轻便，减少体积。

在最近的4次发布中，我们与Ecosystem Performance (e18e)项目（生态系统性能项目）合作，使Storybook变得更轻量、更快。我们的目标是为开发人员提供一个既高效又超响应式的使用体验。

我们是怎么做到的啊？

• 移除： fs-extra #29126， handlebars #29208， file-system-cache #29256
• 替换： lodash ⇒ es-toolkit #28981， express ⇒ polka #29230， chalk ⇒ picocolors #28262， qs ⇒ picoquery #28315
• 进行了优化： 启用生产模式下的 react #29197，可选的 prettier #29223
• 预构建： Vite 构建器 #29302，React 渲染器 #29298，文档插件 #29301

除此之外，我们还为Storybook 9原型制作了一个仅使用ESM的迁移，以实现更加精简的版本。

Svelte 5 的支持功能

Svelte 5 终于来了个，同时也支持 Storybook。

• ✅ 支持符文功能
• ✅ 用 Svelte CSF 写你的故事
• ✅ 超强的 Svelte TypeScript 支持
• ✅ 通过 Svelte CLI 实现零配置设置

故事书 for Svelte 诞生于 2018 年，那时 Svelte 本身也刚刚出现不久。它是某位单一贡献者的作品。多年来，它得到了社区贡献者的持续支持，但一直没有明确的所有者或维护者。这种情况在 2023 年发生了变化，当时 Jeppe Reinhold 加入了核心团队，并将改善 Svelte 集成作为自己的使命。

最大的变化是新的 Svelte 故事语法格式，它会在新的 Svelte 5 安装中出现，感谢维护者 Mateusz Kadlubowski 的贡献。下面就是它的样子：

    <!-- Button.stories.svelte -->
    <script module>
      import { defineMeta } from '@storybook/addon-svelte-csf';
      import { fn } from '@storybook/test';
      import Button from './Button.svelte';

      const { Story } = defineMeta({
        component: Button,
        tags: ['autodocs'],
        args: {
          label: '点我',
          onclick: fn(),
        },
      });
    </script>

    <Story name="Primary" args={{ primary: true }} />

    <Story name="Secondary" />

    <Story name="Large" args={{ size: 'large' }} />

除了提供了一种更熟悉的编写故事的方法，Storybook 8.4 还提供了出色的 TypeScript 和 JSDoc 支持，能够自动生成高质量的 UI 控件，从而帮助您更好地使用 Svelte 组件，这要感谢 Taku Fukada 的出色贡献。

多亏了 Svelte 维护者 Ben McCann，Storybook 现在已经成为 Svelte CLI 入门体验的一部分，真是锦上添花。

这意味着在你的 SvelteKit 应用中运行 Storybook 比以往任何时候都要简单。不仅如此，随着越来越多的 Svelte 用户，我们非常兴奋地看到 Svelte 支持将提升到一个新的水平。

React Native 故事集 8

如果你还在使用 React Native 的 Storybook 并被困在 7.x 版本上，看着 8.x 版本的新特性不断发布，你肯定感到非常痛苦。为此，我们发布了 React Native Storybook 8。它的一大亮点是全新的响应式用户界面，针对手机和平板进行了优化，因为 RN 开发者大部分时间都在这些设备上工作。此外，我们还计划在未来不断更新 RN。RN 和 Web 的 Storybook 现在共享了大量代码。

详情请参阅React Native Storybook 8 发布文章。

给故事打标签和筛选故事

如果你认真对待组件的文档和测试工作，你的 Storybook 可能会有数百甚至数千个故事。Storybook 的侧边栏层级结构和文本搜索功能有助于管理复杂性，但即便如此，庞大的 Storybook 也可能变得难以管理。

这就是我们创建它的原因：我们现在在Storybook 8.4中已经提供了一个灵活的标签系统，用于筛选故事内容。

为了配合这一新功能，社区成员 Steve Dodier-Lazaro 创建了一个新的插件，storybook-addon-tag-badges，用于在 Storybook 侧边栏中显示标签信息。

如需了解更多详情，请参见Storybook 的标签文档。

又有了数百项改进

除了上面提到的功能外，每个 Storybook 发布都包含数百项改进和错误修复，这些改进和修复在各个层面都有体现。一些亮点如下：

• ✅ 将 Storybook for Solid 更新到 v8 版本！#10
• ✅ Storybook ESLint 插件现在支持 v9 和扁平化文件配置 #156
• ✅ Angular 源代码片段得到了重大改进 #29069

拭试看今天!

故事书 8.4 版今天已经可以使用了。试试在新项目中用用看。

使用最新的Storybook版本初始化项目：npx storybook@latest init

或者更新已有的项目。

npx storybook@latest upgrade

如果您是从 7.x 版本升级，我们有一份指南可以帮助您。我们也有一份从旧版本迁移的指南在这里。

下一步会是啥

在8.5版本里，还将带来更多的改进：

1. 更好的控制来运行您故事子集中一部分的测试
2. 在 UI 上对所有您的故事进行 A11y 检查
3. React 服务器组件 (RSC) 的模拟和测试
4. 提供一个 afterEach 钩子用于测试后的断言（RFC 可用）

你可以查看Storybook 的路线图以获取我们目前的工作内容，并了解最新信息。

致谢

特别感谢这 38 位参与了 Storybook 8.4 的贡献者！

以下是 GitHub 上的一些用户:
@3w36zj6 — 一个 GitHub 用户名,
@43081j — 一个 GitHub 用户名,
@andrasczeh — 一个 GitHub 用户名,
@chudesnov — 一个 GitHub 用户名,
@dannyhw — 一个 GitHub 用户名,
@flexbox — 一个 GitHub 用户名,
@ghengeveld — 一个 GitHub 用户名,
@honcharenkozhenya — 一个 GitHub 用户名,
@hyeongrok7874 — 一个 GitHub 用户名,
@infinitexyy — 一个 GitHub 用户名,
@javanpoirier — 一个 GitHub 用户名,
@jonniebigodes — 一个 GitHub 用户名,
@jreinhold — 一个 GitHub 用户名,
@jsmike — 一个 GitHub 用户名,
@k35o — 一个 GitHub 用户名,
@kasperpeulen — 一个 GitHub 用户名,
@kazuyainoue0124 — 一个 GitHub 用户名,
@kylegach — 一个 GitHub 用户名,
@mahdi-hazrati — 一个 GitHub 用户名,
@ndelangen — 一个 GitHub 用户名,
@pedrosousa13 — 一个 GitHub 用户名,
@sentience — 一个 GitHub 用户名,
@shilman — 一个 GitHub 用户名,
@shreysinha02 — 一个 GitHub 用户名,
@sidnioulz — 一个 GitHub 用户名,
@stephenjason89 — 一个 GitHub 用户名,
@strozw — 一个 GitHub 用户名,
@tobiasdiez — 一个 GitHub 用户名,
@valentinpalkovic — 一个 GitHub 用户名,
@vanessayuenn — 一个 GitHub 用户名,
@vctqs1 — 一个 GitHub 用户名,
@webpro — 一个 GitHub 用户名,
@yannbf — 一个 GitHub 用户名,
@ziebam — 一个 GitHub 用户名,