Storybook 8.2

Storybook 是世界顶级设计系统（Carbon、Polaris、Fluent、Lightning 等）背后的组件工作台。因此，它通常与构建和记录用于重用的原子组件相关联。

但 UI 组件有多种尺寸和形状。

对于 Faire、Yoobic 和 Monday.com 的团队而言，Storybook 是“产品 UI”（如购物车、仪表板、聊天小部件、日历和完整页面）的首选工具。这些是复杂的、有状态的组件，高质量的测试使团队有信心构建和迭代。

这就是为什么我们正在加强 Storybook 中的测试。我很高兴地宣布 Storybook 8.2，这是我们迈向不妥协的组件测试的旅程中的下一站

• 🪝 新的测试钩子，与其他流行的测试工具保持一致
• 🧳 可移植的故事，用于在其他测试和文档工具中重用
• 📦 包整合，以减少依赖冲突
• 🛼 简化的入门流程，使新用户快速上手
• ✨ 全新且改进的网站，具有更好的框架文档
• 💯 数百项更多改进

新的测试钩子

像 Jest/Vitest/Playwright/Cypress 这样的现代测试工具都使用 Jasmine 测试结构。每种工具的语法略有不同，但它们都归结为以下测试钩子：before/afterAll、before/afterEach、describe 和 test。

Storybook 有其自己的故事语法，组件故事格式 (CSF)。CSF 是捕获组件各种状态示例的最佳方式。在 Storybook 6.4 中，我们添加了 play 函数，使其可以编写交互和断言脚本

// ToolbarMenu.stories.js
import { fn, expect } from '@storybook/test';
import { ToolbarMenu } from './ToolbarMenu';

export default { component: ToolbarMenu };
export const Disabled = {
  args: { disabled: true, onSelected: fn() },
  play: async ({ canvas, args }) => {
    await userEvent.click(canvas.getByRole('button'));
    expect(args.onSelected).not.toHaveBeenCalled();
  },
};

使用 play 函数，可以在 Storybook 中创建许多 Jasmine 风格的测试。但并非所有测试都可以。如果您来自其他测试工具，则需要学习曲线才能将测试转换为 CSF。

现在不用了。在 Storybook 8.2 中，我们引入了 before 钩子（可以返回清理函数，用作 after 钩子）和 play 的可选 mount 参数（适用于 React、Vue 3 和 Svelte）。现在，您可以使用与 Jasmine 风格工具相同的控制流编写组件测试，您可以在单个 play 函数中“安排、执行和断言”所有内容

// ToolbarMenu.stories.jsx
import { fn, expect } from '@storybook/test';
import { ToolbarMenu } from './ToolbarMenu';

export default {
  component: ToolbarMenu,
};

export const Disabled = {
  args: { disabled: true, onSelected: fn() },
  play: async ({ mount, args }) => {
    // Arrange
    const items = await loadItems(10);
    const canvas = await mount(<ToolbarMenu items={items} />);
    
    // Act
    await userEvent.click(canvas.getByRole('button'));
    
    // Assert
    expect(canvas.getAllByRole('button').length).toBe(items.length);
    expect(args.onSelected).not.toHaveBeenCalled();
  },
};

这是一个非破坏性更改，因此您所有现有的故事都将继续像以前一样工作。推荐的故事编写方式（使用隐式挂载）也没有改变。但是，当您需要额外的功能时，新的测试钩子就在那里为您服务。

“第一次使用 @storybookjs play 测试。天啊！🥰 编写测试从未如此之快！！”
— @brechtilliet

查看文档，并继续关注即将发布的完整功能公告以及未来几周的更多钩子示例！

可移植的故事

Storybook 是迭代构建、记录和测试组件的最佳工具。但是 JS 生态系统中还有许多其他出色的工具，我们希望您能够根据自己的需要使用故事。

在 8.1 中，我们发布了 Playwright 组件测试 的有限形式的“可移植的故事”。现在在 8.2 中，我很高兴推出适用于 React 和 Vue 3 的可移植故事，并提供实验性的 Svelte 支持。这使您可以符合人体工程学地将故事转换为框架的“原生”组件，并捆绑一些额外的代码来运行故事可能具有的任何测试钩子

// Button.test.js
import { test, expect } from 'vitest';
import { screen } from '@testing-library/react';
import { composeStories } from '@storybook/react';
 
// Import all stories and the component annotations from the stories file
import * as stories from './Button.stories';
 
// Every component that is returned maps 1:1 with the stories,
// but they already contain all annotations from story, meta, and project levels
const { Primary, Secondary } = composeStories(stories);
 
test('renders primary button with default args', async () => {
  /**
   * Runs through story lifecycle:
   * 1. loaders
   * 2. beforeEach
   * 3. render w/ decorators (and other annotations)
   * 4. play fn (including mount, when used)
   * 5. cleanup (from beforeEach, hooks)
   */
  await Primary.run();
});

除了 API 之外，我们还准备了额外的文档，介绍如何在 Vitest 和 Jest 中重用故事。查看文档，我们将很快发布完整的功能公告。

整合的依赖管理

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

在 8.2 中，我们开始解决这个问题。我们将 18 个软件包整合到一个核心软件包 storybook 和一组用于构建器/渲染器/插件的卫星软件包中。这是一个非破坏性更改，旨在遵循 Vite 的软件包结构。此外，我们还在捆绑 Storybook 的许多依赖项，以消除版本冲突。

我们还与 James Garbutt（Ecosystem Performance (e18e) 项目的负责人）合作，将我们的实用程序库升级到更小/更快/更现代的版本（再见 doctrine！👋）。

这项工作仍处于早期阶段，但到目前为止，我们已设法将安装大小/时间减少约 20%。新的整合结构为我们未来的优化奠定了基础，因此请密切关注 8.3 及更高版本中更大幅度的下降。

简化的入门流程

我们关注的另一个领域是入门体验。每周有成千上万的开发人员尝试 Storybook，但从安装到成为成功用户的道路充满了陷阱。在 Storybook 8.2 中，我们刷新了入门体验，并将其从 React 扩展到 Vue 3 和 Angular，以帮助引导用户朝着正确的方向前进

请继续关注，我们将在 8.x 中扩展此体验，使 Storybook 更容易在您的项目中配置。

全新且改进的文档站点

Storybook 有一个全新的文档站点！它包括

• ✨ 新主页，具有全新的、完全响应式的动画，更好地说明了 Storybook 的许多功能
• 📚 新文档主页，具有每个框架的专用着陆页（Next.js、SvelteKit 等）
• 🌙 文档的亮/暗模式，以匹配您的系统设置
• 🧱 为进一步改进和更快迭代奠定的基础工作

数百项更多改进

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

• ✅ Webpack5/Vite：修复 sourcemaps - #27171，感谢 @valentinpalkovic！
• ✅  Angular：允许源代码预览的格式配置 - #28305，感谢 @64BitAsura！
• ✅ CLI：为 init 添加 --no-dev 选项 - #26918，感谢 @fastfrwrd！
• ✅ CLI：在新项目中包含 @storybook/addon-svelte-csf - #27070，感谢 @benmccann
• ✅ Core：修复由 watchStorySpecifiers 引起的启动挂起 - #27016，感谢 @heyimalex！
• ✅ Vue3：启用新的 hydration mismatch 编译时标志 - #27192，感谢 @Cherry

立即试用！

Storybook 8.2 今天发布。在新项目中试用它

npx storybook@latest init

或升级现有项目

npx storybook@latest upgrade

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

下一步是什么

我们为 8.3 准备了很多内容

1. 与 Vitest 集成以实现极速组件测试
2. 为我们的 Next.js 框架添加 Vite 支持，以实现 Vitest 兼容性和更好的 DX
3. 带有 UI 的故事标签，用于交互式侧边栏过滤
4. 进一步减少安装大小（试用 8.3-alpha，它又小了 40%！）
5. 故事全局变量，一种更简洁的方式来编写特定视口、主题和语言环境的故事

要了解我们正在进行和考虑的工作的最新情况，请查看 Storybook 的新路线图。

鸣谢

衷心感谢 39 位贡献者，他们的 PR 出现在 Storybook 8.2 中！

@43081j @64bitasura @alexatvista @alirezaebrahimkhani @benmccann @cdedreuille @cherry @cosielq @dario-baumberger @deiga @dexofthewild @edoardocavazza @ghengeveld @girgetto @jonniebigodes @jreinhold @kasperpeulen @kevinfoerster @kongallis @kylegach @mnigh @ndelangen @pl12133 @rocktakey @seanparmelee @shilman @simenb @sinnedh @sni-j @superhermione @tmeasday @tobiasdiez @tony19 @valentinpalkovic @vanessayuenn @yannbf @yk-kd @yuheiy