HTML 快照测试
使用快照测试捕获意外的 HTML 变化
HTML 快照测试 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是快照测试
快照测试会在首次运行时记录组件或页面的渲染输出，随后在每次运行时将新输出与保存的快照进行比较。HTML 输出中的任何变化都会导致测试失败，直到快照被有意更新为止。
Jest 快照测试
Jest 的 toMatchSnapshot() 匹配器会将一个值（包括渲染为 HTML 的 JSX）序列化，并与保存的文件进行比较。当发生有意的更改时，npx jest -u 会更新快照。测试可以作为防止意外渲染更改的回归防线。
import { render } from "@testing-library/react";
import Button from "./Button";
test("Button renders consistently", () => {
const { container } = render(<Button>Save</Button>);
expect(container.innerHTML).toMatchSnapshot();
});Storybook 测试运行器
Storybook 测试运行器会运行每个故事，并通过 axe（无障碍）和 DOM 序列化来生成其输出的快照。与 Chromatic 结合后，它还会在此基础上增加视觉回归检测——除了 DOM 差异之外，还能发现像素级差异。
使用 Percy 或 Chromatic 进行视觉回归
Percy 和 Chromatic 会将渲染后的页面快照保存为图像，并呈现视觉差异。它们可以发现 DOM 快照无法发现的 CSS 回归（字体替换、边距调整或颜色变化）。请将 DOM 快照（成本低、速度快）与视觉快照（成本高、覆盖全面）结合使用。
快照维护
变化“过于容易”的快照会变成噪声。避免为不稳定的值生成快照（日期、标识符、随机键）。对于每次运行之间合理变化的字段，请使用 Jest 的属性匹配器（expect.any(String)）。让快照保持小巧并聚焦于重点。
快照代码审查
拉取请求中的快照文件差异是重要的审查材料。审查者要确认 DOM 更改是有意的并且值得接受，同时发现由“一次简单的” CSS 更改引起的意外连锁影响。应像对待其他差异一样对待快照差异。
不要为所有内容创建快照
为巨大的顶层页面渲染创建快照很脆弱——每个细微变更都会级联成巨大的差异。请在组件层级创建快照：每个 Button、每个 Card、每个 FormField。页面级渲染更适合使用视觉回归测试。
快照序列化
请选择序列化方式：完整 HTML、简化 DOM、仅属性或可访问性树。每种格式能捕获不同的回归问题。对于界面组件，完整 HTML 最为全面；对于由属性驱动的逻辑，仅属性方式成本更低，而且很少产生误报。
快照出问题时
最常见的原因是重构生成了结构不同但等价的 HTML。请检查差异：如果变更是有意为之且效果良好，请更新快照；如果变更出乎意料，请修复底层代码。切勿不经检查就直接运行 jest -u。
跨浏览器快照
视觉回归工具会在多个浏览器中进行渲染，并报告特定于浏览器的差异。请利用这一点捕获在 Safari 与 Chrome 中渲染方式不同的 CSS——这在早期采用阶段的新布局功能中很常见。没有跨浏览器快照时，这类回归只能通过人工 QA 发现。
与其他测试结合
快照测试是必要的，但并不充分。它们可以捕获非预期的渲染变更，却无法发现逻辑错误（例如点击按钮后是否执行了正确操作）。请将其与用于验证行为的单元测试以及用于验证用户流程的端到端测试结合起来——每一层都能捕获不同的故障。
性能
快照测试速度很快——它们只需比较字符串或文件。视觉回归测试速度较慢（需要渲染像素、比较图像，而且通常要跨多个浏览器）。请在每次持续集成构建中运行快照；每个 PR 都运行视觉回归，但根据持续集成预算，可以不必在每次提交时运行。
知识检查
为什么 DOM 快照测试通常还要配合 Percy 或 Chromatic 这样的视觉回归测试？
总结
快照测试会在首次运行时捕获已渲染的 HTML，并在后续运行中标记任何变更。请使用 Jest 的 toMatchSnapshot 测试组件 DOM，使用 Storybook 测试运行器测试故事，使用 Percy/Chromatic 在像素层面进行视觉回归。在组件层级创建快照，而不是在页面层级创建；排除不稳定的值，并在 PR 中仔细审查差异。请结合单元测试和端到端测试，以实现完整覆盖。
常见问题解答
「HTML 快照测试」课时是免费的吗？
是的 — 「HTML 快照测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「HTML 快照测试」这节课中我会学到什么？
使用快照测试捕获意外的 HTML 变化 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「HTML 快照测试」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。