npm 包 jest-snapshot-get-started 使用教程

简介

jest-snapshot 是一个 Jest 测试框架内置的快照测试工具包，可以在前端自动化测试中进行可视化测试，使得测试代码更加友好，从而提高开发效率。

这篇文章将会介绍如何使用 jest-snapshot 进行自动化测试。

安装

npm install jest-snapshot

配置

在 jest.config.js 中进行以下配置：

module.exports = {
  // ...
  snapshotSerializers: ["jest-snapshot-serializer-raw"],
  // ...
};

使用

expect(snap).toMatchSnapshot()

在测试中，使用 expect(snap).toMatchSnapshot(); 来生成快照，并与之前的快照进行比较。

示例：

it("should render correctly with specific props", () => {
  const tree = renderer.create(<MyComponent />);
  expect(tree).toMatchSnapshot();
});

如果之前没有生成过快照，则此处会生成一个新的快照，并将其保存到一个 .snap 文件中。

如果此处已经有一个之前的快照，则会比较二者之间的差异。如果有差异，则会报告测试失败，并输出差异详细信息。如果差异满足要求，则会将新生成的快照保存到 .snap 文件中。

expect.addSnapshotSerializer(serializer)

jest-snapshot 支持通过 expect.addSnapshotSerializer() 函数添加自定义序列化器。这样，您就可以自定义如何序列化测试结果。

示例：

expect.addSnapshotSerializer({
  print: (value, serialize) => {
    return serialize(value.toFixed(2));
  },
  test: (value) => typeof value === "number",
});

总结

本文介绍了 jest-snapshot 的使用方法，包括安装、配置和使用等。使用 jest-snapshot 进行自动化测试可以提高前端开发效率，为代码质量保驾护航。

如果您想要了解更多关于 jest-snapshot 的信息，可以访问 官方文档 获取更多细节。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f88238a385564ab6d32