Jest JsonSnapshotSerializer 的用法-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一款流行的 JavaScript 测试框架，它提供了丰富的测试工具和 API。其中一个比较实用的工具是 JsonSnapshotSerializer。它可以将 JSON 数据序列化成格式化的字符串，方便在测试用例中进行比较。本文将介绍 Jest JsonSnapshotSerializer 的用法，并通过实例代码来展示其深度和价值。

环境搭建

要使用 Jest JsonSnapshotSerializer，首先需要安装 Jest。

$ npm install --save-dev jest

安装完成后，在项目根目录下创建一个 jest.config.js 文件，配置 Jest。

module.exports = {
  snapshotSerializers: ['jest-serializer-json'],
}

在这个配置文件中，我们指定了使用 Jest 自带的 jest-serializer-json 序列化器。

使用方法

准备工作完成后，我们就可以在测试用例中使用 JsonSnapshotSerializer 了。假设要测试一个返回 JSON 数据的函数 getUserInfo，可以这样写测试用例：

// www.javascriptcn.com code example
it('returns user info', () => {
  const userInfo = getUserInfo()
  expect(userInfo).toMatchInlineSnapshot(`
    {
      "id": 1,
      "name": "John Doe",
      "email": "john.doe@example.com"
    }
  `)
})

在这个测试用例中，我们调用了 getUserInfo 函数并将返回的 JSON 数据与一个 "快照" 进行比较。这个 "快照" 实际上是一个字符串，其中包含了我们在测试用例中期望得到的 JSON 数据。为了方便，我们可以使用 toMatchinlineSnapshot 函数来生成这个字符串。这个函数的作用是：将一个单行的字符串转换为一个多行的实际字符串，并在控制台中输出该字符串，以便我们将其复制到测试用例中。如果将该函数传递给 expect，它就会将其返回的字符串与实际结果进行比较。

如果测试用例中的值与预期值不匹配，Jest 就会输出一个错误信息，告诉我们实际结果与预期结果的差异。这样我们就可以轻松地发现错误并进行修复。这是一个非常强大的工具，可以尽可能地保证测试用例的准确性。

深度学习

除了上述基本用法之外，JsonSnapshotSerializer 还提供了更多的选项，可以让我们更细致地控制序列化的过程。

保留空格和缩进

在默认情况下，JsonSnapshotSerializer 会删除空格和缩进。这样可以减小快照的体积，并使其更易于阅读。但是，在某些情况下，我们可能希望保留空格和缩进，以便在控制台中更好地查看。可以通过在配置文件中添加选项来实现：

module.exports = {
  snapshotSerializers: [['jest-serializer-json', { space: 2 }]],
}

这个配置文件告诉 Jest，我们希望将缩进设置为两个空格。

忽略属性

在某些情况下，我们可能希望忽略 JSON 数据中的某些属性，以确保测试的一致性。在这种情况下，可以使用 ignoredProperties 选项来实现：

module.exports = {
  snapshotSerializers: [['jest-serializer-json', { ignoredProperties: ['timestamp'] }]],
}

在这个例子中，我们告诉 Jest，我们希望忽略 "timestamp" 属性。

序列化器自定义

在某些情况下，Jest 默认的 JsonSnapshotSerializer 可能无法满足我们的需求。例如，我们可能需要将 JSON 数据转换为不同的格式，或者根据属性的值进行分类。

在这种情况下，我们可以编写自定义的序列化器，并在配置文件中引用它。下面是一个简单的示例：

// www.javascriptcn.com code example
const mySerializer = {
  print: (val, serialize) => {
    if (val === null) {
      return 'null'
    } else if (Array.isArray(val)) {
      return `[${val.map(serialize).join(', ')}]`
    } else if (typeof val === 'object') {
      return `{${Object.keys(val)
        .sort()
        .map(key => `${key}: ${serialize(val[key])}`)
        .join(', ')}}`
    } else {
      return serialize(val)
    }
  },
  test: val => Boolean(val && typeof val === 'object'),
}

module.exports = {
  snapshotSerializers: [mySerializer],
}

在这个例子中，我们定义了一个名为 mySerializer 的序列化器，它将 JSON 数据转换为一种新的格式。它的工作原理是：如果值是 null，则返回字符串 "null"；如果它是数组，则返回一个以逗号分隔的值列表，并将每个值作为 serialize 函数的参数；如果它是对象，则返回一个以冒号分隔的键值对列表，并按键名称排序。

最后，我们在配置文件中将 mySerializer 添加为 Jest 的默认序列化器。这样，在测试用例中使用 toMatchSnapshot 函数时，它就会自动地使用我们定义的自定义序列化器。

贴合实际

本文中使用的示例非常简单，但是 JsonSnapshotSerializer 的价值在于它可以应用于任何返回 JSON 数据的函数或接口。它可以帮助我们快速发现和解决错误，并减少测试用例的维护成本。我相信它可以帮助您更轻松地编写高质量的前端代码。

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

Jest JsonSnapshotSerializer 的用法