Jest 测试框架中的 snapshot 测试详解-JavaScript中文网-JavaScript教程资源分享门户

前言

Jest 是一个以 JavaScript 为基础的测试框架。它的前身是 Facebook 的内部测试工具，之后在2015年开源。它具有运行速度快、使用方便、支持测试异步代码等优点，在前端开发中被广泛使用。在 Jest 中，Snapshot 测试是一个非常重要的功能，本文将详细讲解 Jest 中的 Snapshot 测试。

什么是 Snapshot 测试

快照（Snapshot）测试是一种测试技术，它通过比较测试结果和标准结果的方式来验证代码的正确性。在 Jest 中，一个快照就是对某个测试用例运行的结果在文件中的序列化结果。

例如，我们有一个组件，它渲染出来的结果是一个 <div> 标签。当我们第一次测试这个组件时，会生成一个快照文件，将这个 <div> 序列化后保存到文件中。当我们再次测试这个组件时，会将渲染出来的 <div> 序列化后和快照文件进行比较。如果两者完全相同，测试就通过了。

Snapshot 测试的使用

安装 Jest

要使用 Jest，首先需要安装它。在项目的根目录下执行以下命令：

npm install --save-dev jest

安装完成后，在项目的 package.json 中添加如下配置：

{
  "scripts": {
    "test": "jest"
  }
}

写一个 Snapshot 测试用例

假设我们有一个名为 hello.js 的文件，它导出了一个函数，这个函数返回一个字符串 'Hello, world!'。我们现在需要对这个函数进行测试。

首先，我们创建一个新的测试文件 hello.test.js。在这个文件中，我们可以使用 Jest 提供的全局函数 test 来定义一个测试用例。代码如下：

const hello = require('./hello');

test('hello() returns correct string', () => {
  expect(hello()).toMatchInlineSnapshot(`"Hello, world!"`);
});

在上面的代码中，我们通过 require 函数将 hello.js 中导出的 hello 函数导入。然后，我们使用 test 函数来定义一个测试用例，这个测试用例将验证 hello() 函数返回的字符串是否正确。

在 expect() 函数中，我们使用 toMatchInlineSnapshot 匹配器。这个匹配器使用一个字符串作为参数，这个字符串就是我们的快照。由于我们第一次测试这个 hello() 函数，快照不存在，因此 Jest 会自动创建一个快照文件 __snapshots__，并将这个字符串保存到快照文件中。

运行测试后，我们可以在项目根目录的 __snapshots__ 目录下看到一个新的快照文件 hello.test.js.snap。这个文件保存了我们刚刚创建的快照。

更新快照文件

假设我们修改了 hello() 函数，让它返回一个字符串 'Hi, world!'。现在，我们再次运行测试，会得到一个失败的测试结果。

当我们在控制台中查看错误信息时，会看到以下提示：

// www.javascriptcn.com code example
Received value does not match the snapshot value.

- Expected
+ Received

- Hello, world!
+ Hi, world!

Difference:

- Expected
+ Received

- "Hello, world!"
+ "Hi, world!"

这个错误提示告诉我们测试用例和快照文件不匹配。为了通过测试，我们需要更新快照文件。我们可以在控制台中输入 u 命令更新快照文件，或者手动去修改它。当我们再次运行测试后，测试通过了。

手动编写快照文件

有时候，我们需要手动编写快照文件。例如，当快照需要包含很复杂的数据结构，或者当我们需要测试一些需要跨多个平台的代码时。

在这种情况下，我们可以使用 createSnapshot 函数来手动创建快照。代码如下：

const sum = (a, b) => a + b;

test('sum function works correctly', () => {
  const result = sum(1, 2);
  expect(result).toMatchSnapshot();
});

在上面的代码中，我们定义了一个名为 sum 的函数，并测试了这个函数是否正确。我们使用 toMatchSnapshot 匹配器来匹配这个函数的返回值和快照文件中的内容。由于我们没有提供快照文件，Jest 会在控制台输出实际的快照内容。我们可以将这些内容复制到我们的快照文件中。从此以后，每次我们运行这个测试用例时，Jest 将使用我们手动创建的快照文件。

Snapshot 测试的深入理解

在测试中，快照只是表象。它是测试代码与实际代码之间的桥梁。如果我们的实际代码改变了，快照也必须相应地更新。只有这样，我们才能保证我们的测试用例依然正确、可靠。

快照本身也有一些特殊的用途。例如，它可以用来测试特殊的 DOM 节点。DOM 节点可能具有各种属性和样式，并且会随时间而变化。使用快照测试，我们可以在不需要手动比较每个属性和样式的情况下，验证 DOM 节点是否正确。

此外，快照测试还可以用来测试外部服务的响应。当我们需要测试一个依赖外部服务的函数时，我们可以使用 Mock 服务来模拟这个外部服务的响应。这样，我们就可以测试我们的函数是否正确地处理了这个响应。同时，我们还可以使用快照测试来验证我们的函数是否正确读取了这个响应，并生成了我们期望的输出结果。

总之，Snapshot 测试是一个非常强大的技术，可以让我们更好地测试我们的前端代码。不仅它使用起来简单方便，而且它还提供了很多重要的特性，例如在测试响应式组件时生成特定的快照、测试依赖外部服务时的 Mock 测试等等。当我们使用 Snapshot 测试时，我们必须牢记一个原则：每个测试用例都必须是可靠的和自足的，只有这样我们才能保证我们的测试用例可以正确地反映我们的实际代码的行为。

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

Jest 测试框架中的 snapshot 测试详解

前言