快照测试保存组件渲染的HTML字符串用于回归验证，但因动态内容易误报；应提取稳定结构断言或清理干扰项，快照文件仅存静态HTML片段且需人工确认变更合理性。
快照测试不是截图，而是保存组件渲染出的 HTML 字符串，并在后续运行中比对是否发生变化。它轻量、快速、适合 UI 回归验证，但容易因动态内容（如时间、随机 ID、key）误报失败。
为什么 toMatchSnapshot() 会频繁失败
快照测试失败通常不是因为 UI 真实出错，而是因为输出不稳定：
-
new Date().toISOString()、Math.random()这类动态值每次执行都不同 - Vue/React 组件里用了自增
key或基于索引生成的 ID，导致快照内容随数据顺序或数量变化 - 第三方库注入的内联样式、data-testid、class 名含哈希（如 CSS-in-JS）
- 组件内部调用
console.warn或触发副作用，间接影响 DOM 结构（比如错误边界渲染不同）
expect(wrapper.html()).toMatchSnapshot() 的替代写法
直接比对完整 html() 容易过度敏感。更稳妥的做法是提取稳定结构再断言：
- 用
wrapper.find('button').attributes()单独校验关键属性，避开整个 DOM 树 - 对文本内容用正则匹配：
expect(wrapper.text()).toMatch(/Welcome, w+/) - 若必须用快照，先清理干扰项：
expect(wrapper.html().replace(/data-v-w+/g, '')).toMatchSnapshot() - Vue 中推荐用
wrapper.element.outerHTML替代html()，避免 Vue Test Utils 内部 wrapper 层级带来的冗余
Jest 快照文件里存的是什么
快照文件（.snap）本质是 JavaScript 模块，导出的字符串就是组件挂载后返回的 HTML 片段。例如：
立即学习“前端免费学习笔记（深入）”；
exports[`MyButton renders with loading state`] = `"<button class=\"btn\" disabled>Loading...</button>";`
注意两点：
- 字符串里所有双引号会被自动转义，单引号保留；
class值里的空格、换行不会被压缩，所以缩进和格式差异也会导致不匹配 - 快照不包含事件绑定、
ref、计算属性状态等运行时信息，只反映最终输出的静态结构 - 更新快照不能只靠
jest -u，要人工确认变更是否合理——比如按钮文字从 “提交” 改成 “发送”，是预期变更；但莫名多了一个div包裹层，就得查原因
快照测试真正难的不是写断言，而是判断哪部分该进快照、哪部分该被剔除。一旦把时间戳、uuid、动态 class 哈希放进快照，就等于放弃了可维护性。
