Storybook 8.1
一个更具生产力、更井然有序、更可预测的 Storybook
Storybook 是行业标准的 UI 组件构建、测试和文档编写工作坊。每天有数千名开发者使用它，其中包括 BBC、Etsy 和 Dropbox 的团队。
在过去的一年里，我们专注于生活质量的维护工作。这最终促成了我们于三月份发布的 Storybook 8.0，这是我们迄今为止性能最好、最稳定的版本。
现在进入 8.x 版本，我们又重新开始致力于改善您的 UI 开发体验。为了启动这一过程，我很高兴地宣布一个更高效、更有条理、更可预测的 Storybook 8.1。
- 🤖 自动生成 Story 并通过控件保存
- 🥸 类型安全的、基于标准的模块模拟
- ⚛️ 单元测试 React Server Components
- 🧳 用于 Playwright 组件测试的可移植 Stories
- 💯 数百项其他改进
用于创建和编辑 Story 的新 UI
Storybook 的原子单位是Story，一个捕捉组件示例的小段 JavaScript。我们一直努力使 Stories 易于阅读和编写，但在 8.1 版本中，我们做得更多：您现在可以从 Storybook 的 UI 中创建和编辑 Stories，React 项目也可以为新组件添加 Stories。想了解更多，请阅读 完整公告 或查看 官方文档。
为 Avatar 组件创建一个新的生成 Stories 文件
类型安全的模块模拟
组件可以依赖各种输入和上下文，例如需要在上下文内部渲染或从网络请求接收数据。在开发和测试时，您通常需要模拟这些依赖项。
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 (RSCs)。这是 React 的一项重大进步，因为到目前为止，React 还没有为 RSC 提供单元测试策略。
由于 RSC 目前主要用于 Next.js 项目，这项工作的大部分涉及创建 许多 Next.js 模块的模拟版本。这些模拟会自动被监视，并添加关键功能（例如能够设置 cookie 值），您可以在 Stories 中直接使用它们。想了解更多，请 查看我们的示例仓库，并期待完整的公告。
![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 组件测试的可移植 Stories
在 Storybook 中开发的最大好处之一是您免费获得了测试。每个隔离的组件示例（或“Story”）都是一个 UI 测试。如果您想测试数据获取和用户交互，Storybook 也有相应的工具。
现在，这是第一次有可能轻松地在 Playwright 的实验性组件测试中重用这些 Stories。这种工作流程将 Storybook 的组件开发和文档与 Playwright 强大的测试功能相结合。想了解更多，请 阅读完整公告 或 查看官方文档。
使用 Playwright 的 VS Code 扩展基于 Story 录制测试
数百项改进
除了上述功能，每个 Storybook 版本都包含各个级别的数百项改进和 bug 修复。以下是一些亮点：
- ✅ 实验性 React 19 支持 #26960 #26898
- ✅ Angular 18 支持 #27237
- ✅ 支持 Angular 17+ 输入和输出信号 #26413 #26546
- ✅ 用于从侧边栏、自动文档或测试运行中排除 Stories 的 Tag #26634 (官方文档)
- ✅ 只读控件 #26577
- ✅ 支持 Next.js 14.2
useParams#26874
立即试用
Storybook 8.1 今日可用。在新项目中尝试它
npx storybook@latest init
或升级现有项目
npx storybook@latest upgrade
如果您是从 7.x 升级，我们有指南可以帮助您。我们还有 一份从旧版本迁移的指南。
下一步
我们专注于 8.2 的两个主要项目：
- 减小 Storybook 的安装占地空间和版本冲突
- 添加 Story 生命周期钩子，以与其他测试工具保持一致
要了解我们正在进行的工作和考虑事项的最新情况，请查看 Storybook 的新路线图。
鸣谢
非常感谢对 Storybook 8.1 的 58 位贡献者的 PR！
@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