快照测试保存组件渲染的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() 容易过度敏感。更稳妥的做法是提取稳定结构再断言：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 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 哈希放进快照，就等于放弃了可维护性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！