Storybook 测试与视觉回归
运行 play 函数进行交互测试，并集成 Chromatic 进行视觉差异比较。
Storybook 测试与视觉回归 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
为什么要在 Storybook 中进行测试
Storybook 7 及更高版本内置 @storybook/test，用于交互测试（play 函数），并与 Chromatic 集成以进行自动化视觉回归测试——无需离开组件浏览器即可完成这一切。
Play 函数
play 函数会在故事渲染完成后运行，并通过 @storybook/test 工具模拟用户交互。结果会显示在交互面板中。
import { within, userEvent, expect } from '@storybook/test';
export const FilledForm: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByLabelText('Email'), 'test@example.com');
await userEvent.click(canvas.getByRole('button', { name: /submit/i }));
await expect(canvas.getByText('Success!')).toBeInTheDocument();
},
};Play 函数中的断言
在 play 函数中使用 @storybook/test 提供的 expect（从 Vitest/Jest 重新导出），对交互后的组件状态进行断言。
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const button = canvas.getByRole('button', { name: /add/i });
await userEvent.click(button);
await expect(canvas.getByText('1 item')).toBeInTheDocument();
await userEvent.click(button);
await expect(canvas.getByText('2 items')).toBeInTheDocument();
},使用 Storybook 测试运行器运行故事测试
@storybook/test-runner 包会将每个包含 play 函数的故事转换为 Jest 测试。在持续集成中只需一条命令即可运行这些测试。
# Install
npm install @storybook/test-runner --save-dev
# package.json
"test-storybook": "test-storybook"
# Run (requires Storybook to be running)
npm run test-storybook什么是视觉回归测试
视觉回归测试会对组件截图进行快照，并标记提交之间像素级的差异。Chromatic、Playwright 和 Percy 都是常用工具。
设置 Chromatic
Chromatic 是官方的 Storybook 云端视觉测试服务。推送故事后，Chromatic 会将截图与之前的基线进行比较。
# Install
npm install chromatic --save-dev
# Run (get project token from chromatic.com)
npx chromatic --project-token=<YOUR_TOKEN>
# CI: add to GitHub Actions
- name: Chromatic
run: npx chromatic --project-token=${{ secrets.CHROMATIC_TOKEN }}审查视觉变化
Chromatic 会显示差异界面，供审查者接受或拒绝视觉变化。接受的变化会成为新的基线；被拒绝的变化会阻止 PR。
使用 Storybook 进行快照测试
测试运行器还可以通过 @storybook/addon-a11y 执行可访问性检查，并在持续集成中自动检查每个故事。
// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';
export default {
async postVisit(page) {
await checkA11y(page, '#storybook-root', {
detailedReport: true,
});
},
};Storybook 组合
将来自不同代码库的多个 Storybook 组合到一个界面中——适合跨项目共享的设计系统。
// .storybook/main.ts
refs: {
'design-system': {
title: 'Design System',
url: 'https://design-system.example.com',
},
},测试响应式故事
使用视口插件在移动端、平板和桌面端尺寸下测试故事。在故事参数中设置视口，可以将故事固定为特定尺寸。
export const Mobile: Story = {
parameters: {
viewport: { defaultViewport: 'mobile1' },
},
args: { label: 'Mobile Button' },
};防止测试不稳定
在 play 函数中使用 delay 等待动画完成，或在 Storybook 预览中全局禁用动画，以避免视觉测试不稳定。
// .storybook/preview.ts
export const parameters = {
chromatic: { disableSnapshot: false },
// Disable CSS animations for consistent screenshots
};
// Global CSS for tests:
// * { animation: none !important; transition: none !important; }覆盖率报告
运行 test-storybook --coverage 生成覆盖率报告，查看 play 函数测试执行了哪些组件代码行。
快速检查
Storybook 的 play 函数会在哪里运行交互？
要点回顾
Play 函数使用 @storybook/test 在 Storybook 中测试组件交互。测试运行器会将 play 函数转换为 Jest 测试，以便在持续集成中运行。Chromatic 会添加视觉回归快照，在合并前标记需要审查的像素级界面变化。
用 AI 导师学习 React — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 88
- 课程
- 324
常见问题解答
「Storybook 测试与视觉回归」课时是免费的吗？
是的 — 「Storybook 测试与视觉回归」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「Storybook 测试与视觉回归」这节课中我会学到什么？
运行 play 函数进行交互测试，并集成 Chromatic 进行视觉差异比较。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「Storybook 测试与视觉回归」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 在 React 项目中设置 Storybook
- 编写 CSF3 故事
- Args、Controls 与 Actions 插件
- Storybook 测试与视觉回归