面向全栈开发者的 Storybook

全栈开发者负责从编写 CSS 到连接数据库的一切事务。这涉及大量的上下文切换和处理来自堆栈不同部分的副作用，这最终会降低您的速度。

Storybook 帮助开发者专注于堆栈的 UI 层。它与您的应用并行运行，并提供一个沙箱环境，用于隔离地可视化、开发和测试 UI 组件。这样，您可以更快地开发 UI，而无需启动整个应用、其服务或调试不稳定的第三方 API。

本文分享了如何使用 Storybook 来简化您的应用程序开发工作流程。

编写 stories 以减少重复性工作

组件根据应用程序状态的不同而呈现不同的外观。您会浪费大量时间来初始化本地数据库、在代码中添加临时数据位，或者只是点击来使应用程序处于正确的状态，以便您可以验证 UI 看起来是否正确。

相反，Storybook 让您可以将所有这些组件变体捕获为 stories，并在您处理组件时随时重新访问它们——从而减少重复性的繁琐工作。

工作原理

组件的超能力在于您无需启动整个应用程序即可查看它们的渲染效果。您可以通过传入 props 来隔离地渲染特定的变体。这就是 story 的作用。

考虑这个 RestaurantCard 组件。它有四种状态，外加亮色和暗色变体。您可以在 RestaurantCard.stories.tsx 文件中为所有这些情况编写 stories。此文件已检入您的存储库，并可供您的整个团队使用。

在处理组件时，打开 Storybook，修改您的代码，并快速循环浏览 stories 以验证其外观和行为。

使用 Storybook 插件来模拟上下文和 API

Stories 展示了 UI 元素的各种状态——从原子组件到页面。隔离组件使验证其所有变体变得更加容易，即使是难以到达的边缘情况，例如加载和错误状态。

当您在应用程序树中向上移动时，重现所有 UI 变体变得更加困难，因为组件已连接到状态和后端 API。Storybook 使您能够模拟此类依赖项。

🔌 数据提供者

诸如 Redux 和 Pinia 之类的状态管理库通过上下文或组合 API 向组件提供数据。您可以使用 Storybook 装饰器来模拟此类数据提供者。

📡 API 请求

对于从 REST 或 GraphQL 端点消费数据的组件，请使用 Mock Service Worker 插件来模拟 API 请求。还有一些特定于库的插件，用于 Apollo、URQL、GraphQL Kit、Axios 等。

将设计工具与 Storybook 连接，以实现顺畅的交付

设计师“交付”图像、规范和原型给开发人员进行实施。这要求开发人员在设计工具和代码编辑器之间跳转，同时处理多个规范版本。这导致流程繁琐且容易丢失信息。设计细节经常丢失，导致大量的来回沟通和返工。

交付插件将设计工件嵌入到 stories 旁边，使得交叉引用规范和编码的 UI 变得更加容易。此外，这种连接将为团队的其余成员保留。

例如，Storybook Design 插件使您能够将 Figma 文件嵌入到插件面板中。

您可以将 Figma 文件附加到组件，甚至单个 stories。

// RestaurantCard.stories.tsx

export default {
 title: 'Components/RestaurantCard',
 component: RestaurantCard,
 parameters: {
   design: {
     type: 'figspec',
     url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=1126%3A3893',
   },
 },
} as ComponentMeta<typeof RestaurantCard>;

不使用 Figma？还有类似的 插件可用于 Zeplin、Zeroheight、UXPin、InVision DSM、Adobe XD、Sketch 等。

使用插件在 Figma 中嵌入 Storybook

您可以使用 Storybook Connect 插件进一步加速交付，该插件将 stories 链接到 Figma 组件变体。它的工作原理是在 Figma 文件中嵌入 live stories。

在审查设计时，您可以通过单击 Figma 侧边栏中的链接来查看连接的 story。或者单击“在浏览器中打开 story”以进入带有插件、测试和 API 文档的 Storybook 环境。

使用 stories 来驱动测试并捕获回归

测试帮助我们自信地交付代码。它们捕获回归和对应用程序行为的意外更改。无论您采用哪种方法，测试前端应用程序最终都归结为测试组件。

要测试一个组件，您必须隔离地渲染它并提供模拟数据来设置场景——这就是 story 的作用。因此，您可以使用 stories 作为测试用例来加速编写测试并减少维护负担。让我们看一个例子。

在这个 RestaurantDetailPage 中，用户可以从菜单中选择一个项目以将其添加到购物车。为了测试此功能，我们将初始状态描述为一个 story。然后将一个 play function 附加到 story 以模拟用户行为（例如，点击和输入）并运行断言。最后，Storybook 将在浏览器中执行此测试。

// RestaurantDetailPage.stories.tsx

import { ComponentStory, ComponentMeta } from '@storybook/react';
import { rest } from 'msw';
import { expect } from '@storybook/jest';
import { within, userEvent } from '@storybook/testing-library';
import { BASE_URL } from '../../api';
import { restaurants } from '../../stub/restaurants';
import { RestaurantDetailPage } from './RestaurantDetailPage';
 
export default {
 title: 'Pages/RestaurantDetailPage',
 component: RestaurantDetailPage,
} as ComponentMeta<typeof RestaurantDetailPage>;
 
export const WithModalOpen: ComponentStory<typeof RestaurantDetailPage> = () => (
 <>
   <RestaurantDetailPage />
   <div id="modal" />
 </>
);
WithModalOpen.play = async ({ canvasElement }) => {
 const canvas = within(canvasElement);
 const item = await canvas.findByText(/Cheeseburger/i);
 await userEvent.click(item);
 await expect(canvas.getByTestId('modal')).toBeInTheDocument();
};
WithModalOpen.parameters = {
 msw: [rest.get(BASE_URL, (req, res, ctx) => res(ctx.json(restaurants[0])))],
};

Stories 是测试的起点

您已经编写 stories 作为开发的自然组成部分。您可以将它们与其他工具以低成本的方式结合起来，以验证 UI 的不同方面。

👀 可视化测试 捕获每个 story 的屏幕截图，然后将其与基线进行比较，以检测外观和集成问题。

♿ 可访问性测试 捕获与视觉、听觉、行动、认知、言语或神经系统障碍相关的可用性问题。Storybook

🕹️ 交互测试 通过触发事件并确保状态按预期更新来验证组件功能。

📥 将 stories 导入 Playwright 或 Cypress 以测试用户流程。

通过自动生成文档来避免重复

仅通过查看组件的代码几乎不可能辨别组件的外观或功能。这通常会导致混淆，并且团队最终会重复组件。您可以通过记录组件来避免此问题。

但是应用程序是使用数百个组件构建的，这使得维护文档具有挑战性。Storybook 的 Docs 插件提供了一种更精简的替代方案。它使用 stories 为您的组件自动生成文档。

文档是使用您的代码生成的，因此它始终保持最新。Stories 变成实时示例，插件使用组件类型和 docgen 注释生成一个 args table。

您可以使用 Storybook CLI 将其构建为静态站点并与您的团队共享。

UI 开发需要专门的工具

专用工具可帮助您隔离和开发堆栈的各个层。想想 Docker、MongoDB Compass、Postman 和 New Relic。同样，Storybook 使您能够隔离 UI 层。

Storybook 是构建、测试和文档化 UI 的工作室。在开发过程中，您将编写 stories 以捕获组件的所有状态和变体。然后将这些 stories 用作测试用例与您最喜欢的工具一起使用，或使用它们来自动生成文档。

本文仅触及了 Storybook 如何融入您的全栈开发工作流程的表面。查看以下指南以更深入地了解使用 Storybook 的工作流程

• UI 测试手册
• 使用 Storybook 构建页面
• 在测试中导入 stories