用 Storybook 把 UI 组件拆出来单独开发从第一个 story 到跑通交互测试【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybookStorybook 是做 UI 组件开发、文档和测试的工作坊。组件长在业务应用里时改一个按钮往往要先启动应用、凑好 mock 数据、再从页面里把目标组件找出来用 Storybook 后单个组件被隔离渲染props 直接改、交互测试直接跑整个流程不依赖宿主应用。下面按实际使用路径走一遍初始化、写故事、验状态、跑测试、协作发布。 先把开发服务器跑起来三分钟完成初始化在应用项目根目录执行npx storybooklatest init这条命令会自动探测你用的框架React、Vue、Svelte、Angular 等生成配置文件和示例 story。完成后执行npm run storybook即可启动开发服务器。打开本地服务后左侧栏按树形目录列出所有 story点任意一条主区域就渲染出对应组件的状态。初期不需要理解它内部如何工作先确认示例 story 能选中、能预览就算跑通了。 写第一个 story一个文件描述组件的多种状态核心概念是story一个 story 就是组件的一种具体状态不必一步到位。先写默认状态再逐个补上 loading、空态、错误态——本质都是同一份渲染代码加上不同的参数。比如空列表状态只需把参数换成空数组export const Empty { args: { items: [] } }怎么给 story 命名并组织侧边栏story 文件用组件名做 title左侧栏会自动生成层级。命名上让每个 story 自带一句描述例如主色 / 加载中 / 空列表新同事打开侧边栏就知道这个组件覆盖了哪些场景。切到文档页签后Storybook 还会根据组件的 props 自动生成属性表每个参数的默认值、说明和用法都在同一页不用手动维护。️ 用 Controls 面板改参数验证状态不写测试代码在 meta 里把 story 用到的 props 标注成 args 后页面下方的 Controls 表单会自动生成字符串是输入框布尔值是开关。改值上方组件实时更新。靠这一步就能完成大部分状态验证标题超 30 个字符会怎样、按钮禁用后颜色对不对、背景色换了排版塌不塌都不用写断言。用 Viewport 验证响应式断点工具栏里的 Viewport 插件提供常见设备尺寸预设。选一个 iPhone 或 iPad 档位画布直接按那个宽度渲染不用反复拖浏览器窗口来量断点。 交互测试与可访问性让组件自己证明自己状态确认清楚后下一步是让机器验证行为这里有两个内置手段。怎么给组件写交互测试交互断言写在 play 函数里比如点击提交按钮出现成功提示。可以在浏览器里打开测试运行器直接跑也可以在 CI 里跑。测试面板把每条断言逐项列出通过和失败一眼能分清。具体写法可以看交互测试文档。怎么开启无障碍检查a11y 插件基于 axe-core 扫描当前 story面板里直接列出违规项按钮是否有可辨识文本、标题层级是否连续顶部统计 Violations、Passes、Warnings 数量。组件交付前把全部 story 扫一遍多数可访问性问题能提前拦住。 协作与发布把组件库交给设计和 QAstory 写完之后的价值很大程度来自分享。把 Storybook 实例发布到云端每次合并请求都会生成一个可访问的链接设计和 QA 打开链接就能核对各状态不用启动完整应用Figma 插件还可以从 Storybook 库里引用组件状态回设计稿。项目配置在哪里找项目级配置集中在.storybook目录里story 的 glob 规则、启用的插件列表、全局装饰器都在其中。想调整侧边栏层级或加一个面板从这里入手完整配置项可以查配置文档。装完跑通第一个 story 后试着在 Controls 面板里把一个 props 改成动态调整——你会发现这个组件到底有哪些状态没被覆盖那正是你下一条 story 和第一个交互测试该写的地方。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考