原文作者：Alex Jover
译者：程序猿何大叔
特别声明：本文是作者 Alex Jover 发布在 VueDose 上的一个系列。
版权归作者所有。
译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，获得授权的记录会放在本文的最后。
正文
如果你进入了测试阶段，你可能已经开始时候用了 Jest：Facebook 创建的一体化测试框架。现在它是最流行的测试框架之一，而且我从一开始就使用至今。
你也可能在使用由 Edd Yerburg 开发的 vue-test-utils，它是官方的单元测试实用工具库，能让我们的测试工作变得更方便。
下面给出同时使用了 Jest 和 vue-test-utils 的测试案例：
it('has a message list of 3 elements', () => {
const cmp = createCmp({ messages: ['msg-1', 'msg-2', 'msg-3'] })
expect(cmp.is('ul')).toBe(true)
expect(cmp.find('.message-list').isEmpty()).toBe(false)
expect(cmp.find('.message-list').length).toBe(3)
})
it('has a message prop rendered as a data-message attribute', () => {
const cmp = createCmp({ message: 'Cat' })
expect(cmp.contains('.message')).toBe(true)
expect(cmp.find('.message').props('message').toBe('Cat')
expect(cmp.find('.message').attributes('data-message').toBe('Cat')
// Change the prop message
cmp.setProps({ message: 'Dog' })
expect(cmp.find('.message').props('message').toBe('Dog')
expect(cmp.find('.message').attributes('data-message').toBe('Dog')
})
复制代码正如上面所示，vue-test-utils 给我们提供了很多方法来检查 props、classes、content、search 等等。另外，它还给我们提供了能改变属性的方法，像 setProps，这个很赞。
这个测试案例有着非常明确的断言：“找到带有 ‘message’ 样式名的元素，并检查它是否有设置为 ‘cat’ 的 ‘data-message’ 属性”。
但如果我告诉你，有了快照测试，你再也不需要做以上的工作。
基本上，你可以利用 snapshots 重写以前的测试案例，如下：
it("has a message list of 4 elements", () => {
const cmp = createCmp({ messages: ["msg-1", "msg-2", "msg-3"] });
expect(cmp.element).toMatchSnapshot();
});
it("has a message prop rendered as a data-message attribute", () => {
const cmp = createCmp({ message: "Cat" });
expect(cmp.element).toMatchSnapshot();
cmp.setProps({ message: "Dog" });
expect(cmp.element).toMatchSnapshot();
});
复制代码测试的结果还是一样的，有时候你还能在快照中找到更多的内容。
注意到在这个测试案例中，我就仅仅在断言表达式中使用了 toMatchSnapshot 方法，没有其他了。这能让单元测试变得更简单和更快速，因为我们不再需要单独检查特定的属性了。
随之而来的是，单元测试的动态性也改变了，我们不再写专门的断言表达式，而是可以将组件设置成任何你想要的状态，然后给它拍个快照。
快照意味着断言渲染状态：它们描述了组件被赋予一个状态时是如何被渲染的，然后拍摄快照，并在比较中校验其有效性。
记着不要通过给单元测试「拍摄快照」来决定你想要的东西，而是取决于你想要去测试什么，以避免本末倒置。
有这么一个方法进行单元测试，我已经受益匪浅了。但是如果你需要去阅读、了解、学习更多，你可以购买我的书本 Testing Vue.js Components with Jest。上周我在其中加入了全新的一个章节，专门用来讲述快照测试，包括如下：
- 重新思考快照
- 为什么、如何、什么时候使用快照
- 什么时候不使用
- 示例代码
请与我交流你的思考，你可以在推特上找到 我。
你可以在线阅读这篇 原文，里面有可供复制粘贴的源代码。如果你喜欢这个系列的话，请分享给你的同事们！
结语
此系列的其他文章，会同步系列官网的发布情况，及时地翻译发布到掘金。请持续关注「程序猿何大叔」，相信我会给大家带来更多优质的内容，不要忘了点赞~
如果想要了解译者的更多，请查阅如下：
- 个人博客：blog.hadesz.com
- 个人 github 仓库：github.com/hadeshe93
- 个人微信公众号：搜索「程序猿何大叔」
请求翻译授权记录
觉得本文不错的话，分享一下给小伙伴吧~