【译】Vue 的小奇技（第九篇）：快照测试的威力

• 原文地址：The power of Snapshot Testing

• 原文做者：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
• 我的微信公众号：搜索「程序猿何大叔」

请求翻译受权记录

---

以为本文不错的话，分享一下给小伙伴吧~