Storybook 是构建、测试和文档化 UI 组件的行业标准工作坊。全球数十万开发者日常使用它，包括微软、Spotify 和法拉利等团队。

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

现在我很高兴宣布 Storybook 8.3。

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

Storybook 8.3 带来了

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

一流的 Vitest 集成

一个 故事 是一个 JavaScript 片段，它捕获了 UI 组件的示例；Storybook 是一个可浏览的故事目录，它列出了所有关键的 UI 状态。

除了目录之外，Storybook 也是一个可执行的测试套件。基本的故事是冒烟测试，用于渲染组件及其输入。复杂的故事可以模拟应用程序状态和网络请求，像用户一样与 UI 交互，并断言关于 DOM 或执行的某些事情——所有这些都是你在一个功能齐全的组件测试中所做的事情。

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

Storybook 从第一天起就进入了测试领域，所以我们知道什么是优秀的测试运行器。当我们第一次尝试 Vitest 的浏览器模式时，我们就知道它很特别。当天我们就与 Vitest 核心团队通了电话，探讨我们如何共同协作组件测试的未来。

今天，这种合作的第一个成果以 @storybook/experimental-addon-test 的形式可供使用。只需最少的配置，你现在就可以将你的故事作为 Vitest 测试运行。

这意味着

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

我们还为 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 构建器开发组件，它的启动速度和热模块替换 (HMR) 比默认的 Webpack 构建器快得多。许多用户已经手动配置了这一点，因为 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 文档。

减小捆绑包大小

有超过 2 万名开发者参与调查，State of JS 调查是 JS 生态系统的风向标。在 2022 年有所下降后，我们改进 Storybook 的努力在 2023 年取得了惊人的成果。最大的抱怨是依赖管理不善：臃肿、安装占用空间和版本冲突。

在 8.2 中，我们将 18 个 Storybook 软件包整合到了一个核心软件包 storybook 中，这是为了实现更一致的软件包结构而进行的重大结构性更改。它还带来了额外的益处，即安装大小/时间减少了约 20%，以及锁文件（lockfile）新增行数减少了约 30%。

在 8.3 中，我们花了一些时间进行依赖去重，又额外减少了约 30% 的安装大小和约 35% 的锁文件新增行数。

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

实验性故事全局设置

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

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

尽管这些环境设置很重要，但一直没有一个简单、标准的方法在故事或组件级别设置这些上下文变量。

在 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' }
}

更多信息请参阅实验性故事全局设置文档。

数百项更多改进

除了上述功能外，每个 Storybook 版本都包含各方面的数百项改进和错误修复。亮点包括

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

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

✅ 禁用保存参数。交互式故事生成可以使用控件值从 Storybook UI 创建新的故事。根据社区反馈，我们添加了一个参数来禁用此功能。#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 的路线图。

鸣谢

特别感谢在 Storybook 8.3 中贡献了 PR 的 31 位贡献者！

@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