Storybook 8.1
一个更高效、更有组织性、更可预测的 Storybook
Storybook 是用于构建、测试和文档化 UI 组件的行业标准工作坊。数千名开发者每天都在使用它，包括 BBC、Etsy 和 Dropbox 的团队。
过去一年，我们专注于提升用户体验的维护工作。这在三月份发布的Storybook 8.0中达到顶峰，这是我们迄今为止性能最好、最稳定的版本。
现在进入 8.x 版本，我们再次寻求改进你的 UI 开发体验。为此，我很高兴地宣布一个更高效、更有组织性、更可预测的 Storybook 8.1
- 🤖 故事自动生成并从控件保存
- 🥸 类型安全、基于标准的模块模拟
- ⚛️ 单元测试 React 服务器组件
- 🧳 Playwright 组件测试的可移植故事
- 💯 数百项更多改进
用于创建和编辑故事的新 UI
Storybook 的原子单位是故事（story），这是一小段 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 服务器组件
与端到端测试 (E2E) 不同，单元测试更快、更稳定，并且允许你分解 UI 及其测试，以便更容易地验证关键状态。Storybook 的新模块模拟功能使我们能够通过模拟 React 服务器组件 (RSC) 依赖的服务器模块来对其进行单元测试。这是 React 的一项重大进步，此前 React 一直缺乏针对 RSC 的单元测试策略。
由于 RSC 目前主要用于 Next.js 项目，这项工作的大部分涉及创建许多 Next.js 模块的模拟版本。这些模拟会自动被监听，并增加关键能力——例如能够设置 cookie 值——你可以在故事中直接使用这些能力。要了解更多信息，请查看我们的示例仓库并期待完整公告。
![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 的每个版本都包含各个层面的数百项改进和 bug 修复。以下是一些亮点：
- ✅ 实验性支持 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 中贡献了 PR 的 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