snapshot测试又称快照测试，可以直观地反映出组件UI是否发生了未预见到的变化。snapshot如字面上所示，直观描述出组件的样子。通过对比前后的快照，可以很快找出UI的变化之处。
第一次运行快照测试时会生成一个快照文件。之后每次执行测试的时候，会生成一个快照，然后对比最初生成的快照文件，如果没有发生改变，则通过测试。否则测试不通过，同时会输出结果，对比不匹配的地方。
jest中的快照文件以为snap拓展名结尾，格式如下（ps: 在没有了解之前，我还以为是快照文件是截图）。一个快照文件中可以包含多个快照，快照的格式其实是HTML字符串，对于UI组件，其HTML会反映出其内部的state。每次测试只需要对比字符串是否符合初始快照即可。
exports[`button 1`] = `"<div><span class=\\"count\\">1</span> <button>Increment</button> <button class=\\"desc\\">Descrement</button> <button class=\\"custom\\">not emitted</button></div>"`;
snapshot测试不通过的原因有两个。一个原因是组件发生了未曾预见的变化，此时应检查代码。另一个原因是组件更新而快照文件并没有更新，此时要运行jest -u更新快照。
› 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with -u to update them.
结合Vue进行snapshot测试
生成快照时需要渲染并挂载组件，在Vue中可以使用官方的单元测试实用工具Vue Test Utils。
Vue Test Utils 提供了mount、shallowMount这两个方法，用于创建一个包含被挂载和渲染的 Vue 组件的 Wrapper。component是一个vue组件，options是实例化Vue时的配置，包括挂载选项和其他选项(非挂载选项，会将它们通过extend覆写到其组件选项)，结果返回一个包括了一个挂载组件或 vnode，以及测试该组件或 vnode 的方法的Wrapper实例。
mount(component:{Component}, options:{Object})
shallowMount与mount不同的是被存根的子组件，详细请戳。
Wrapper上的丰富的属性和方法，足以应付本文中的测试需求。html()方法返回Wrapper DOM 节点的 HTML 字符串。find()和findAll()可以查找Wrapper里的DOM节点或Vue组件，可用于查找监听事件的元素。trigger可以在DOM节点/组件上触发一个事件。
结合上述的方法，我们可以完成一个模拟事件触发的快照测试。
细心的读者可能会发现，我们平时在使用Vue时，数据更新后视图并不会立即更新，需要在nextTick回调中处理更新完成后的任务。但在 Vue Test Utils 中，为简化用法，更新是同步的，所以无需在测试中使用 Vue.nextTick 来等待 DOM 更新。
demo演示
Vue Test Utils官方文档中提供了一个集成VTU和Jest的demo，不过这个demo比较旧，官方推荐用CLI3创建项目。
执行vue create vue-snapshot-demo创建demo项目，创建时要选择单元测试，提供的库有Mocha + Chai及Jest，在这里选择Jest.安装完成之后运行npm run serve即可运行项目。
本文中将用一个简单的Todo应用项目来演示。这个Todo应用有简单的添加、删除和修改Todo项状态的功能；Todo项的状态有已完成和未完成，已完成时不可删除，未完成时可删除；已完成的Todo项会用一条线横贯文本，未完成项会在鼠标悬浮时展示删除按钮。
组件简单地划分为Todo和TodoItem。TodoItem在Todo项未完成且触发mouseover事件时会展示删除按钮，触发mouseleave时则隐藏按钮（这样可以在快照测试中模拟事件）。TodoItem中有一个checkbox，用于切换Todo项的状态。Todo项完成时会有一个todo-finished类，用于实现删除线效果。
为方便这里只介绍TodoItem组件的代码和测试。
<template> <li :class="['todo-item', item.finished?'todo-finished':'']" @mouseover="handleItemMouseIn" @mouseleave="handleItemMouseLeave" > <input type="checkbox" v-model="item.finished"> <span>{{item.content}}</span> <button v-show="!item.finished&&hover" @click="emitDelete">delete</button> </li> </template> <script> export default { name: "TodoItem", props: { item: Object }, data() { return { hover: false }; }, methods: { handleItemMouseIn() { this.hover = true; }, handleItemMouseLeave() { this.hover = false; }, emitDelete() { this.$emit("delete"); } } }; </script> <style lang="scss"> .todo-item { list-style: none; padding: 4px 16px; height: 22px; line-height: 22px; .content { margin-left: 16px; } .del-btn { margin-left: 16px; } &.todo-finished { text-decoration: line-through; } } </style>
进行快照测试时，除了测试数据渲染是否正确外还可以模拟事件。这里只贴快照测试用例的代码，完整的代码戳我。