Storybook 是行业标准的可视化组件开发、测试和文档编制工具。每天有数十万开发者使用它，包括 Microsoft、Spotify 和 Ferrari 的团队。

我们最近宣布了对 UI 测试未来的重大投入。组件测试是 E2E 测试的完美伴侣，它带来了覆盖率、控制力、速度和可靠性，以补充 E2E 的黑盒“整个系统”保真度。

现在，我很高兴地宣布 Storybook 8.3。

Storybook，最好的组件开发工具，已与 Vitest，世界上最快、最可配置的测试运行器，合作，为您带来无与伦比的组件测试体验。

Storybook 8.3 带来了

• ⚡️ 一流的 Vitest 集成，用于将 stories 作为组件测试运行
• 🔼 Next.js-Vite 框架，用于 Vitest 兼容性和更好的 DX
• 🗜️ 减小的包大小，以实现更小的安装占用空间
• 🌐 Story globals API，用于标准化主题、视口和语言环境的 stories
• 💯 数百项更多改进

一流的 Vitest 集成

Story 是一个 JavaScript 片段，它捕获 UI 组件的示例；Storybook 是一个可浏览的 stories 目录，其中包含所有关键 UI 状态。

除了目录，Storybook 还是一种可执行的测试套件。基本 stories 是烟雾测试，它们使用输入来渲染组件。复杂的 stories 可以模拟应用程序状态和网络请求，像用户一样与 UI 交互，并断言 DOM 或执行的内容——所有您在功能齐全的组件测试中所做的事情。

现在，在 Storybook 8.3 中，由于 Storybook 的 Vitest 集成，可以在无头浏览器中以极快的速度运行所有这些 stories 作为测试。

Storybook 从一开始就涉足测试领域，因此我们知道好的测试运行器是什么样的。当我们第一次尝试 Vitest 的浏览器模式时，我们就知道它很特别。同一天，我们与 Vitest 核心团队进行了电话会议，讨论如何合作开发组件测试的未来。

今天，这项合作的第一个成果已通过 @storybook/experimental-addon-test 提供。通过最少的配置，您现在可以将 stories 作为 Vitest 测试运行。

这意味着

• 无与伦比的测试执行速度，
• Vitest CLI 出色的 DX，
• 开箱即用的测试覆盖率指标，
• 与 Vitest VSCode 扩展的兼容性，
• 在浏览器或 JSDom 中运行测试的灵活性，
• 用于 stories 的内联/文件快照测试，
• 以及更多。

我们还为 Vitest 带来了 Storybook 标志性的点击调试工作流程：当测试失败时，单击一下即可在浏览器中显示时间旅行调试器，以精确检查出了什么问题。

我们将在未来几周内分享更多关于此集成的消息，但在此期间，您可以参考官方文档开始。

Next.js Vite 框架

我们 Vitest 集成的一个大问题是如何支持 Webpack 项目。

我们还没有一个通用的答案，但对于 Next.js 项目（约占 Storybook 使用量的 20%），我们创建了一个 Vite 插件来模拟 Next.js 环境。该插件支持 Next 的优化图像/字体、SWC 配置以及标准样式系统的开箱即用支持。

当您在 Next.js 项目中安装 Storybook Test 时，它会自动添加该插件，以便您可以在 Vitest 中测试客户端和服务器应用程序组件。

我们还使用该插件创建了一个 Next.js Vite 框架。这意味着您也可以使用 Storybook 的 Vite 构建器来开发您的组件，它比默认的 Webpack 构建器具有更快的启动速度和 HMR。这是许多用户已经手动配置过的，因为 Vite 的 DX 要好得多。但手动配置通常是对 Next.js 环境的糟糕近似（除非您付出很多努力）。现在我们已经为您解决了这些问题，我们认为这是一个巨大的改进。

结果可在 @storybook/experimental-nextjs-vite 中找到，您可以通过安装该包并更新 .storybook/main.ts 来尝试。

// .storybook/main.ts

export default {
-  framework: '@storybook/nextjs',
+  framework: '@storybook/experimental-nextjs-vite',
};

要了解有关插件和框架的更多信息，请参阅Next.js Vite 文档。

减小的包大小

随着 20k+ 名开发者接受调查，《State of JS》调查是 JS 生态系统的脉搏。在 2022 年有所下降后，我们为改进 Storybook 所做的努力取得了2023 年的惊人成果。最大的抱怨是糟糕的依赖管理：臃肿、安装占用空间和版本冲突。

在 8.2 版本中，我们将 18 个 Storybook 包合并到一个名为 storybook 的核心包中，这是一个主要的结构性更改，以实现更一致的包结构。它还带来了将安装大小/时间减少约 20%，并将锁文件行数增加约 30% 的好处。

在 8.3 版本中，我们花了一些时间去重依赖项，并将安装大小又减少了约 30%，锁文件行数又减少了约 35%。

与 Storybook 8.1 相比，在 Vite React-TS 项目上，这使我们的总安装大小减少了 50%，锁文件减少了 65%。我们计划在 8.4 版本中再进行一轮清理，然后在 9.0 版本中进行一些小的破坏性更改以进一步提升。

实验性 Story globals

每个 Storybook story 都捕获了 UI 组件的关键状态。多年来，我们一直努力优化 story 语法，以便通过系统地改变其输入（通常是 props）来轻松捕获所有 UI 状态。

但 UI 状态也可以由组件上下文决定。例如，视口、主题、背景或国际化区域设置都是影响组件渲染方式的环境设置。

尽管这些环境设置很重要，但一直没有一种简单、标准的方式来设置这些上下文变量，以 story 或组件为单位。

现在，“Story globals”来了，这是 8.3 版本中解决此差距的新概念。

// RestaurantCard.stories.ts
import type { Meta, StoryObj } from '@storybook/react'
import { RestaurantCard } from './RestaurantCard'

const meta = {
  component: RestaurantCard,
} satisfies Meta<typeof RestaurantCard>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    id: '1',
    name: 'Burger Kingdom',
    rating: 4.2,
  }
}

export const Dark: Story = {
  ...Default,
  globals: { theme: 'dark' }
}

有关更多信息，请参阅实验性 Story globals 文档。

数百项改进

除了上述功能外，每一次 Storybook 发布都包含数千项各级别的改进和 bug 修复。一些亮点：

✅ Rsbuild。Rspack 团队一直在悄悄改进对Rsbuild的支持，并将其添加为 Storybook CLI 的新构建器。#28694 查看刚刚发布的Rsbuild 1.0 版本！

✅ Angular+Vite 支持。查看新的 Analog 集成！

✅ 禁用保存参数。交互式 Story 生成可以使用控件值从 Storybook 的 UI 创建新的 stories。根据社区反馈，我们添加了一个参数来禁用此功能。#28734

✅ Vue 代码片段和内存管理改进。我们为 Vue 的文档代码片段进行了大量改进。#27194

✅ Vue 内存管理。我们还修复了 vue-component-meta 中自动控件推断的一些内存管理问题。#28589

立即尝试！

Storybook 8.3 今天可用。在新项目中尝试一下

npx storybook@latest init

或升级现有项目

npx storybook@latest upgrade

如果你从 7.x 升级，我们有一个指南可以帮助你。我们还有一个从旧版本迁移的指南。

下一步

我们将在 8.4 版本中带来更多令人兴奋的改进

1. 用于在 Storybook 中运行测试和可视化结果的 UI
2. 用于交互式调试测试失败和警告的工作流程
3. 进一步减小安装大小（我们正在加速！)
4. 交互式基于标签的侧边栏过滤 UI

有关我们正在进行的工作和考虑的事项的最新信息，请查看 Storybook 的路线图。

鸣谢

特别感谢 31 位贡献者，他们的 PRs 已包含在 Storybook 8.3 中！

@0916dhkim @43081j @abcdmku @aberllin @ahayes91 @aminghs @andrejilderda @averethel @bbboy01 @booc0mtaco @chakas3 @fi3ework @filipemelo2002 @ghengeveld @jonniebigodes @jreinhold @kasperpeulen @kylegach @kyletsang @larsrickert @marklb @ndelangen @shilman @skred @tmeasday @tobiasdiez @valentinpalkovic @vanessayuenn @vincentdevreede @yannbf