编辑“︁Vue.js 组件快照测试”︁

{{DISPLAYTITLE:Vue.js 组件快照测试}}  
{{Note|本文适用于 Vue.js 2.x 和 3.x 版本，示例代码以 Vue 3 为主，但核心概念通用。}}  

== 简介 ==  
'''组件快照测试'''（Snapshot Testing）是 Vue.js 测试中的一种技术，用于捕获组件的渲染输出（通常是虚拟 DOM 或 HTML 结构）并保存为“快照文件”。后续测试运行时，会将当前输出与保存的快照对比，若不一致则提示潜在问题。  

快照测试的核心价值在于：  
* **快速检测渲染异常**：如意外的 DOM 结构变化。  
* **简化测试编写**：无需手动断言所有细节。  
* **适用于复杂组件**：对动态内容较少的组件效果显著。  

== 工作原理 ==  
快照测试流程可分为三步：  
1. **首次运行**：生成组件的渲染快照并保存为文件（如 `.snap`）。  
2. **后续运行**：重新渲染组件，将结果与快照文件对比。  
3. **差异处理**：若不一致，则提示开发者确认是预期变更还是错误。  

<mermaid>  
flowchart LR  
    A[首次测试] -->|生成| B[快照文件]  
    C[后续测试] -->|对比| B  
    B --> D{差异?}  
    D -->|是| E[开发者确认]  
    D -->|否| F[通过]  
</mermaid>  

== 示例：基本用法 ==  
以下示例使用 Jest（Vue 测试常用工具）和 `@vue/test-utils`。  

=== 1. 安装依赖 ===  
<syntaxhighlight lang="bash">  
npm install --save-dev jest vue-jest @vue/test-utils  
</syntaxhighlight>  

=== 2. 编写测试文件 ===  
测试一个简单的 `Button.vue` 组件：  
<syntaxhighlight lang="vue">  
<!-- Button.vue -->  
<template>  
  <button class="btn" :disabled="disabled">  
    {{ label }}  
  </button>  
</template>  

<script>  
export default {  
  props: {  
    label: String,  
    disabled: Boolean  
  }  
}  
</script>  
</syntaxhighlight>  

对应的测试文件 `Button.spec.js`：  
<syntaxhighlight lang="javascript">  
import { mount } from '@vue/test-utils'  
import Button from './Button.vue'  

describe('Button', () => {  
  it('渲染正确', () => {  
    const wrapper = mount(Button, {  
      props: {  
        label: '提交',  
        disabled: false  
      }  
    })  
    expect(wrapper.html()).toMatchSnapshot()  
  })  
})  
</syntaxhighlight>  

=== 3. 运行测试 ===  
首次执行会生成快照文件 `__snapshots__/Button.spec.js.snap`，内容类似：  
<syntaxhighlight lang="html">  
<!-- 快照文件内容 -->  
<button class="btn">提交</button>  
</syntaxhighlight>  

若后续修改了 `Button.vue` 的模板（如添加 `data-testid` 属性），Jest 会报告差异：  
<syntaxhighlight lang="text">  
- Snapshot  
+ Received  

- <button class="btn">提交</button>  
+ <button class="btn" data-testid="submit-btn">提交</button>  
</syntaxhighlight>  

== 高级技巧 ==  

=== 动态内容处理 ===  
对于日期、随机 ID 等动态内容，可通过自定义序列化器或占位符解决：  
<syntaxhighlight lang="javascript">  
it('忽略动态ID', () => {  
  const wrapper = mount(DynamicComponent)  
  const html = wrapper.html().replace(/id="[^"]+"/g, 'id="[DYNAMIC]"')  
  expect(html).toMatchSnapshot()  
})  
</syntaxhighlight>  

=== 更新快照 ===  
若差异是预期的，运行以下命令更新快照：  
<syntaxhighlight lang="bash">  
jest --updateSnapshot  
# 或交互式更新：  
jest --watch  
</syntaxhighlight>  

== 实际案例 ==  
'''场景'''：一个电商网站的 `ProductCard` 组件需确保价格显示格式稳定。  

1. **初始快照**：  
<syntaxhighlight lang="html">  
<div class="price">$19.99</div>  
</syntaxhighlight>  

2. **错误检测**：若代码误将价格格式改为 `19.99 USD`，快照测试将失败，防止部署错误。  

== 局限性 ==  
* **不适合高动态内容**：如频繁变化的 UI。  
* **需人工确认差异**：无法自动判断变更是否合理。  
* **维护成本**：快照过多时可能难以管理。  

== 总结 ==  
组件快照测试是 Vue.js 测试工具箱中的重要工具，尤其适合：  
* 静态或半静态组件（如导航栏、页脚）。  
* 需要快速回归测试的大型项目。  

{{Tip|结合其他测试类型（如单元测试、E2E 测试）以获得更全面的覆盖率。}}

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js测试]]