九、快照测试

到目前为止，您已经了解了如何测试 Vue.js 组件的结构、样式、方法、计算属性、事件、观察者等。通过使用各种技术和方法，您已经学会了如何做到这一点。

但是，如果我告诉您，您可以通过简单地使用快照测试来测试其中的大部分内容，该怎么办？

您已经在第 1 章中看到了快照测试的使用，在和第 2 章中编写了第一个 Vue.js 组件单元测试，测试深入渲染了 Vue.js 组件，但这些章节更多地侧重于解释浅渲染和深渲染，所以我还没有详细解释。

快照测试是通过比较两个不同的输出来断言的技术。

可以将其视为类似于端到端测试中用于检查回归的屏幕截图技术：第一次测试运行将截取屏幕的一部分（例如，一个按钮），从那一刻起，相同测试的所有后续运行将比较新屏幕截图和原始屏幕截图。如果它们相同，则测试通过；否则，就会出现倒退。

快照测试以同样的方式工作，但它不是比较图像，而是比较可序列化的输出，例如 JSON 和 HTML，或者只是比较字符串。

由于 Vue.js 呈现 HTML，因此可以使用快照测试在给定组件不同状态的情况下断言呈现的 HTML。

对于这个例子，让我们考虑下面的 To0T0.组件：

在这种情况下，我们可以测试该组件的几个方面：

• fullName是name+surname的组合。


• 当选择组件时，它有一个selected类。


• 它发出一个contact-click事件。

创建验证这些规范的测试的一种方法是分别检查所有内容——附加到 DOM 元素的类、HTML 结构、计算属性和状态。

正如您在其他章节中所看到的，您可以按如下方式执行这些测试：

import { mount } from "vue-test-utils";
import ContactBox from "../src/components/ContactBox";
const createCOntactBox= (id, name, surname, selected) =>
mount(ContactBox, {
propsData: { id, name, surname, selected }
});
describe("ContactBox.test.js", () => {
it("fullName should be the combination of name + surname", () => {
const cmp = createContactBox(0, "John", "Doe", false);
expect(cmp.vm.fullName).toBe("John Doe");
});
it("should have a selected class when the selected prop is true", () => {
const cmp = createContactBox(0, "John", "Doe", true);
expect(cmp.classes()).toContain("selected");
});
it("should emit a contact-click event with its id when the component is clicked", () => {
const cmp = createContactBox(0, "John", "Doe", false);
cmp.trigger("click");
const payload = cmp.emitted("contact-click")[0][0];
expect(payload).toBe(0);
});
});


但是现在，让我们考虑一下快照测试在这方面可以如何帮助我们。

如果仔细考虑，组件将根据其状态进行渲染。我们将其称为呈现状态。

使用快照测试，我们可以检查呈现状态，因为这是组件状态的投影结果，而不用担心检查特定的东西，例如属性、类、方法和计算属性。

为此，您可以对上一个测试使用快照测试，如下所示：

it("fullName should be the combination of name + surname", () => {
const cmp = createContactBox(0, "John", "Doe", false);
expect(cmp.element).toMatchSnapshot();
});


正如您所看到的，我现在不是单独检查，而是断言cmp.element的快照，这是组件的呈现 HTML。

如果您现在运行测试套件，那么应该已经创建了一个ContactBox.test.js.snap文件，并且您还会在控制台输出中看到一条消息：

图 9.1

让我们分析生成的快照：

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[
`ContactBox.test.js fullName should be the combination of name + surname 1`
] = `
class=""
>



John Doe