Storybook 8.1
更高效、更有序、更可预测的 Storybook
Storybook 是构建、测试和记录 UI 组件的行业标准工作台。每天有数千名开发者使用它，包括 BBC、Etsy 和 Dropbox 的团队。
在过去的一年中，我们专注于生活质量维护工作。这最终促成了 3 月份发布的 Storybook 8.0，这是我们迄今为止性能最高且最稳定的版本。
现在在 8.x 版本中，我们重新开始致力于改善您的 UI 开发体验。为了启动这项工作，我很高兴地宣布推出更高效、更有序、更可预测的 Storybook 8.1
- 🤖 故事自动生成和从控件保存
- 🥸 类型安全、基于标准的模块模拟
- ⚛️ 单元测试 React Server Components
- 🧳 用于 Playwright 组件测试的可移植故事
- 💯 数百项更多改进
用于创建和编辑故事的新 UI
Storybook 的最小单元是故事，它是捕获组件示例的一小段 JavaScript 代码。我们努力使故事易于阅读和编写，但在 8.1 中，我们更进一步：您现在可以从 Storybook 的 UI 创建和编辑故事，并且 React 项目可以为新组件添加故事。要了解更多信息，请阅读完整公告或查看官方文档。
为 Avatar 组件创建一个新的生成故事文件
类型安全的模块模拟
组件可能依赖于各种输入和上下文，例如需要在上下文中渲染或从网络请求接收数据。在开发和测试时，您通常需要模拟这些依赖项。
Storybook 支持各种模拟：从将 props 传递给您的组件，到使用装饰器包装它们以控制样式或上下文，再到使用 Mock Service Worker (MSW) 模拟网络请求。
在 8.1 中，我们为 Storybook 添加了模块模拟。这允许您灵活地将 JS 模块与受控替换项交换。您可以使用它来模拟来自浏览器 cookie、本地存储或元框架功能（如您的应用程序路由器）的组件输入。
我们的模块模拟是完全类型安全的，最重要的是，它是完全基于标准的。要了解更多信息，请阅读我们的详细文章或查看官方文档。
![A screenshot of a portion of a `package.json` file containing the code: { "type": "module", "imports": { "#lib/db": { "storybook": "./lib/db.mock.ts", "default": "./lib/db.ts" }, "#*": [ "./*", "./*.ts", "./*.tsx" ] } }](https://storybookblog.ghost.io/content/images/2024/05/SubpathImports.png)
lib/db 模块添加绝对导入，并在 Storybook 内部时自动导入模拟文件。单元测试 React Server Components
与端到端测试 (E2E) 不同，单元测试速度更快、更不易出错，并且允许您分解 UI 及其测试，以便更轻松地验证关键状态。Storybook 的新模块模拟使我们能够通过模拟它们所依赖的服务器模块来单元测试 React Server Components (RSC)。这是 React 的一项重大进步，React 到目前为止仍然缺乏 RSC 的单元测试策略。
由于 RSC 目前主要在 Next.js 项目中使用，因此这项工作的大部分涉及创建许多 Next.js 模块的模拟版本。这些模拟会自动被监视并添加关键功能（例如能够设置 cookie 值），您可以直接在故事中使用这些功能。要了解更多信息，请查看我们的示例 repo并期待完整公告。
![A screenshot of the `noteDetail.stories.ts` file, containing the code: import { cookies } from '@storybook/nextjs/headers.mock'; import { createUserCookie, userCookieKey } from '#lib/cookie'; import Page from './noteDetail'; const meta = { component: Page, // Use an RSC component in Storybook! async beforeEach() { // Set a Next.js cookie before each story is rendered cookies().set(userCookieKey, await createUserCookie('alice')) }, parameters: { nextjs: { navigation: { pathname: '/note/[id]', query: { id: '1' } }, }, }, } satisfies Meta<typeof Page>](https://storybookblog.ghost.io/content/images/2024/05/RSC.png)
用于 Playwright 组件测试的可移植故事
在 Storybook 中开发的最大好处之一是您可以免费获得测试。每个隔离的组件示例（或“故事”）都是一个 UI 测试。如果您想测试数据获取和用户交互，Storybook 也为此提供了工具。
现在，首次可以轻松地在 Playwright 的实验性组件测试中重用这些故事。此工作流程将 Storybook 的组件开发和文档与 Playwright 强大的测试功能相结合。要了解更多信息，请阅读完整公告或查看官方文档。
使用 Playwright 的 VS Code 扩展程序记录基于故事的测试
数百项更多改进
除了上述功能外，每个 Storybook 版本都包含数百项各个级别的改进和错误修复。以下是一些亮点
- ✅ 实验性 React 19 支持 #26960 #26898
- ✅ Angular 18 支持 #27237
- ✅ 支持 Angular 17+ 输入和输出信号 #26413 #26546
- ✅ 用于从侧边栏、自动文档或测试运行中排除故事的标签 #26634 (官方文档)
- ✅ 只读控件 #26577
- ✅ 支持 Next.js 14.2
useParams#26874
立即试用
Storybook 8.1 今天发布。在新项目中试用它
npx storybook@latest init
或升级现有项目
npx storybook@latest upgrade
如果您从 7.x 升级，我们有指南可以帮助您。我们还有从旧版本迁移的指南。
下一步是什么
我们专注于 8.2 的两个主要项目
- 减少 Storybook 安装占用空间和版本冲突
- 添加故事生命周期钩子以与其他测试工具保持一致
要获得关于我们正在进行和考虑的工作的最新视图，请查看Storybook 的新路线图。
鸣谢
非常感谢在 Storybook 8.1 中做出贡献的 58 位贡献者！
@43081j @abiriadev @ariperkkio @arnabsen @balazsorban44 @bashmish @benmccann @cdedreuille @chakas3 @cherry @deining @drik98 @eric-blue @ethriel3695 @fatcat560 @fyodorovandrei @ghengeveld @glenjamin @goodactive @hakshu25 @imgbotapp @inokawa @johnendson @jonniebigodes @jorge-ji @joshwooding @jpzwarte @jreinhold @justingish @jwilliams-met @kasperpeulen @kylegach @larsdouweschuitema @larsrickert @laurens94 @leeovictor @lifeiscontent @ndelangen @nkabrown @noranda @r4ai @rui-silva-beqom @scottdotjs @seanparmelee @shilman @shuta13 @simenb @sni-j @spanishpear @takurinton @tmeasday @tobbe @valentinpalkovic @vanessayuenn @xyy94813 @yannbf @yuemori @yukikitagata