• 原文地址： 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 方法，没有其他了。这能让单元测试变得更简单和更快速，因为我们不再需要单独检查特定的属性了。

随之而来的是，单元测试的动态性也改变了，我们不再写专门的断言表达式，而是可以将组件设置成任何你想要的状态，然后给它拍个快照。

快照意味着断言 渲染状态 ：它们描述了组件被赋予一个状态时是如何被渲染的，然后拍摄快照，并在比较中校验其有效性。