npm包jest-snapshot使用教程

介绍

jest-snapshot 是一个用于快照测试的npm包。使用它，我们可以在写单元测试时，轻松地记录某个函数或组件在特定输入情况下的输出，并将其保存为快照。然后，在以后的测试中，我们可以检查该函数/组件的输出是否与之前保存的快照匹配。

安装

首先，在项目根目录中安装 jest-snapshot：

npm install jest-snapshot --save-dev

接下来，您需要在jest配置文件（通常是 jest.config.js）中启用快照测试。 在配置文件中添加以下内容：

module.exports = {
  ...
  snapshotSerializers: ['jest-snapshot-serializer-raw']
}

这个配置告诉Jest在运行测试时使用 jest-snapshot。同时，snapshotSerializers指定了序列化程序，以将输出转换为字符串进行比较，例如 jest-snapshot-serializer-raw 可以让您看到更具可读性的差异信息。

使用

在我们的测试脚本中，我们可以使用 toMatchSnapshot() 函数来创建和更新快照。例如，考虑一个很简单的函数：

function sum(a, b) {
  return a + b;
}

我们可以编写以下测试：

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toMatchSnapshot();
});

在第一次运行此测试时，toMatchSnapshot() 将记录 sum(1,2) 的输出，并将其保存到一个文件中。以后再次运行该测试时，它将与保存的快照进行比较，如果两者不匹配，测试就会失败。

当测试失败时，我们可以使用 --updateSnapshot 标志来更新快照：

npm test -- -u

这将强制Jest使用当前函数/组件的输出更新快照。

高级用法

在某些情况下，我们可能需要更细粒度地控制快照测试的行为。例如，我们可能需要在测试中包含随机生成的数据，或者我们可能需要针对不同的输入情况创建多个快照。

在这种情况下，我们可以使用 toMatchInlineSnapshot() 函数。使用此函数，我们可以直接在测试脚本中指定快照内容，而无需将其保存到单独的文件中。例如：

test('random number', () => {
  const randomNumber = Math.random();

  expect(randomNumber).toMatchInlineSnapshot(`
    0.7070977751189339
  `);
});

注意，toMatchInlineSnapshot() 可以接受任何字符串作为参数，因此您可以将其用于嵌入其他类型的数据（如对象和数组）。

结论

使用 jest-snapshot 进行快照测试可以让我们更轻松地编写和维护单元测试。通过创建快照，我们可以轻松地比较函数/组件输出的变化，并且可以使用 toMatchSnapshot() 函数轻松更新快照。即使在处理复杂数据时，也可以使用 toMatchInlineSnapshot() 函数更高效地进行快照测试。

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