修改第一个快照中传入的content，重新运行测试时，终端会输出不匹配的地方，输出数据的格式与Git类似，会标明哪一行是新增的，哪一行是被删除的，并提示不匹配代码所在行。
- Snapshot + Received - <li><input type="checkbox"> <span>test TodoItem</span> <button>delete</button></li> + <li><input type="checkbox"> <span>test TodoItem content change</span> <button>delete</button></li> 88 | } 89 | }) > 90 | expect(wrapper.html()).toMatchSnapshot() | ^ 91 | }) 92 | 93 | it('toggle checked', () => { at Object.toMatchSnapshot (tests/unit/TodoItem.spec.js:90:32)
同时会提醒你检查代码是否错误或重新运行测试并提供参数-u以更新快照文件。
Snapshot Summary › 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with `-u` to update them.
执行npm run test:unit -- -u或yarn test:unit -u更新快照，输出如下示，可以发现有一个快照测试的输出更新了。下次快照测试对照的文件是这个更新后的文件。
Test Suites: 1 passed, 1 total Tests: 7 passed, 7 total Snapshots: 1 updated, 2 passed, 3 total Time: 2.104s, estimated 3s Ran all test suites. Done in 2.93s.
其他
除了使用toMatchSnapshot()外，还可以使用toMatchInlineSnapshot()。二者不同之处在于toMatchSnapshot()从快照文件中查找快照，而toMatchInlineSnapshot()则将传入的参数当成快照文件进行匹配。
配置Jest
Jest配置可以保存在jest.config.js文件里，可以保存在package.json里，用键名jest表示，同时也允许行内配置。
介绍几个常用的配置。
rootDir
查找Jest配置的目录，默认是pwd。
testMatch
jest查找测试文件的匹配规则，默认是[ "**/__tests__/**/*.js?(x)", "**/?(*.)+(spec|test).js?(x)" ]。默认查找在__test__文件夹中的js/jsx文件和以.test/.spec结尾的js/jsx文件，同时包括test.js和spec.js。
snapshotSerializers
生成的快照文件中HTML文本没有换行，是否能进行换行美化呢？答案是肯定的。
可以在配置中添加snapshotSerializers，接受一个数组，可以对匹配的快照文件做处理。jest-serializer-vue这个库做的就是这样任务。
如果你想要实现这个自己的序列化任务，需要实现的方法有test和print。test用于筛选处理的快照，print返回处理后的结果。
后记
在未了解测试之前，我一直以为测试是枯燥无聊的。了解过快照测试后，我发现测试其实蛮有趣且实用，同时由衷地感叹快照测试的巧妙之处。如果这个简单的案例能让你了解快照测试的作用及使用方法，就是我最大的收获。
如果有问题或错误之处，欢迎指出交流。
参考链接