返回博客

Storybook 8.3

极速组件测试

loading
Michael Shilman
@mshilman
最后更新于

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 集成,可以在无头浏览器中以极快的速度将所有这些故事作为测试运行。

CLI output showing a partial list of story files tested, then a summary table listed 40 passed test files, 89 passed tests, and a duration of 7.59 seconds.
在 Mealdrop 项目仓库中测试每个故事时的 CLI 输出

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

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

这意味着

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

我们还为 Vitest 带来了 Storybook 标志性的“点击调试”工作流程:当测试失败时,只需单击一下即可在浏览器中启动时间旅行调试器,精确检查出错的原因。

0:00
/0:20

在接下来的几周里,我们将分享更多关于此集成的信息,但在此期间,你可以参考官方文档来开始使用。

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' }
}
0:00
/0:16

注意:导航到 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

加入 Storybook 邮件列表

获取最新新闻、更新和发布信息

7,180位开发者,还在增长中

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被数十万开发者用于生产环境的工具。远程优先。

查看职位

热门文章

React Native Storybook 8

React Native 回归!
loading
Michael Shilman

Storybook Test 抢先看

多模式测试,在浏览器中获得即时反馈
loading
Michael Shilman

Storybook 中的组件测试

UI 测试的未来
loading
Michael Shilman
加入社区
7,180位开发者,还在增长中
原因为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与贡献博客
示例探索项目组件术语表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI