Storybook 是构建、测试和文档化 UI 组件的行业标准工作台。每天有成千上万的开发者使用它，包括微软、Spotify 和法拉利的团队。

我们最近宣布了我们在 UI 测试未来上的重大押注。组件测试是 E2E 测试的完美搭档，它带来了覆盖率、控制力、速度和可靠性，以补充 E2E 的黑盒“全系统”保真度。

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

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

Storybook 8.3 带来了

• ⚡️ 一流的 Vitest 集成，可将 stories 作为组件测试运行
• 🔼 Next.js-Vite 框架，用于 Vitest 兼容性和更好的 DX（开发者体验）
• 🗜️ 减少 bundle 大小，以获得更小的安装占用空间
• 🌐 Story 全局 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 配置以及开箱即用支持一套标准样式系统。

当您将 Storybook Test 安装到 Next.js 项目中时，它会自动添加该插件，以便您可以在 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 文档。

减少 bundle 大小

在对 2 万多名开发者进行调查后，《State of JS 调查》是 JS 生态系统的脉搏。在 2022 年下降之后，我们改进 Storybook 的努力得到了回报，在2023 年取得了惊人的成果。最大的抱怨是依赖管理不善：臃肿、安装占用空间和版本冲突。

在 8.2 中，我们将 18 个 Storybook 软件包整合到一个核心软件包 storybook 中，这是更连贯的软件包结构的重大结构性变化。它还具有减少约 20% 的安装大小/时间和减少约 30% 的 lockfile 行数的良好副作用。

在 8.3 中，我们花了一些时间来重复数据删除依赖项，并额外减少了约 30% 的安装大小和约 35% 的 lockfile 行数。

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

实验性 story 全局变量

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

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

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

在 8.3 中引入了新的构造 “Story 全局变量” 来解决此差距

// 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 全局变量的文档。

数百项更多改进

除了上述功能外，每个 Storybook 版本都包含数百项改进和错误修复，遍及各个层面。一些亮点

✅ 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