Skip to main content

快照测试（snapshot）

什么是快照测试​

快照测试用于捕获和验证代码输出的快照。

可以理解为，每次会为程序拍一张照片，之后和上一次拍的照片进行对比。

最初目的是为了降低 UI 测试编写和维护的成本。

测试 Vue 组件​

import { it, expect } from "vitest";
import Hi from "./Hi.vue";
import { mount } from "@vue/test-utils";

it("snapshot", () => {
  const wrapper = mount(Hi);
  expect(wrapper.html()).toMatchSnapshot();
});

@vue/test-utils 是官方提供的一个测试工具库。

它可以将组件转换成组件实例对象，也提供了很多 API 来测试组件。

inline snapshot​

可以将生成的快照信息放在当前的测试脚本里。

import { it, expect } from "vitest";

it("inline snapshot", () => {
  expect({ name: "nansen", age: 20 }).toMatchInlineSnapshot(`
            {
              "age": 20,
              "name": "nansen",
            }
  `);
});

这样的好处是可读性更高，如果数据量少的情况下，推荐使用。

指定生成文件类型和路径​

import { it, expect } from "vitest";
import Hi from "./Hi.vue";
import { mount } from "@vue/test-utils";

it("snapshot", () => {
  const wrapper = mount(Hi);
  expect(wrapper.html()).toMatchFileSnapshot("./hi.html");
});

这样 wrapper.html() 就不会被记录为字符串，也不会包含很多转义符，

而是一个 html 文件，这样被记录的内容的可读性更好。