Jest snapshot 测试实践总结-JavaScript中文网-JavaScript教程资源分享门户

Jest snapshot 测试实践总结

作为前端开发人员，我们经常需要进行单元测试。在 React 应用中，Jest 是一个被广泛使用的测试框架。Jest 提供了一种称为 "snapshot" 的测试方法，它能够捕获组件的渲染结果，并将其保存在文件中以进行比较。这种方法非常方便，能够在开发过程中提供实时反馈并减少测试代码编写时间，但是如果不正确使用，也会带来错误的测试结果。

在这篇文章中，我们将讨论如何正确使用 Jest 的 snapshot 测试，并提供一些技巧来提高测试的质量。

一、Jest snapshot 测试的基础

Jest snapshot 测试是一种自动验证 UI 组件的输出形式的方法。当进行 snapshot 测试时，它会将组件的渲染结果与以前保存的快照进行比较。如果两个快照不匹配，就意味着渲染结果已更改。这意味着您需要重新检查您的代码并确认这是有意的更改。在测试中，您可以自动快速检查 UI 组件的输出和交互式模式在整个开发周期中的变化。

以下是一个简单的例子，展示了 Jest snapshot 测试的基础功能：

import React, { Component } from 'react';
import renderer from 'react-test-renderer';

class MyComponent extends Component {
  render() {
    return <h1>Hello, Jest snapshot testing!</h1>;
  }
}

describe('MyComponent', () => {
  test('renders correctly', () => {
    const tree = renderer.create(<MyComponent />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

在上面的代码中，我们使用了 renderer 来渲染 MyComponent 并将其序列化为 JSON 字符串。然后我们使用了 toMatchSnapshot() 方法来检查快照文件是否存在，如果没有则将当前快照保存到文件中。第一次运行此代码时，Jest 会创建一个新的快照文件。以后每次运行此测试时，Jest 将使用现有的快照文件与当前快照文件进行比较。

请注意，此示例仅是测试快照示例，如果您需要测试交互式组件，请查看如下所述的技巧。

二、如何正确使用 Jest snapshot 测试

虽然 Jest snapshot 测试看似简单，但是如果不正确使用，它可能会导致错误的测试结果。下面是几个注意点：

确保测试中包含所有组件变化点

在测试过程中，您应该通过输入不同的属性、状态或模拟用户与组件的交互来尽可能覆盖所有组件变化点。如果快照测试尚未包含特定情况，请在编辑快照文件之前重新考虑您的测试。

更新快照文件时要谨慎

当您对组件进行更改时，您可能需要更新现有的快照文件。一般来说，每个更新都应该由人员进行手动修改。这是因为自动更新可能会破坏您的测试。在进行手动编辑时，您应该仔细查看每个更改并确认它们都是预期的更改，否则您的测试可能会失败。

不要过度使用 Jest snapshot 测试

Jest snapshot 测试是一种灵活而方便的测试方法，但是并不是所有的测试都适合使用快照测试。例如，如果您需要测试时间敏感性或您的 UI 是动态生成的，则快照测试可能不适合。请使用您认为最合适的测试方法来测试您的组件。

三、如何提高 Jest snapshot 测试的质量

虽然 Jest snapshot 测试是一种方便的测试方法，但是也有一些技巧可以帮助您提高您的测试质量。

使组件可测

在实际开发中，您应该设计和编写您的组件以支持测试。这意味着您需要遵循单一责任原则和分离关注点模式，从而使组件的测试更加容易。

显示更多的组件信息

Jest snapshot 测试只检查组件的输出形式。如果组件出现错误，您将不得不调试以找出其位置。为了减少调试的时间，您可以在测试中打印组件的更多信息。在快照测试中，可以使用 console.log 将组件输出为在控制台中查看的 JavaScript 对象。

test('renders correctly', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  console.log(tree);
  expect(tree).toMatchSnapshot();
});

自定义快照名称

默认情况下，Jest 快照文件是根据测试用例名称自动生成的。您可以为您的快照文件设置更具描述性的名称以更好地理解它们的作用。

test('renders correctly', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchInlineSnapshot(`"…
    <h1>
      Hello, Jest snapshot testing!
    </h1>
    …"`);
});

在上面的示例中，我们使用了 toMatchInlineSnapshot 方法，它将快照文件的名称作为字符串传递给方法。在测试中，您可以在这里编写快照字符串。

自定义快照测试器

如果您的组件需要比默认的 toMatchSnapshot 更复杂的序列化方法，则可以自定义快照测试序列化程序。这允许您更好地控制快照的输出格式。您可以在 Jest 的配置文件中定义指定的序列化程序。

module.exports = {
  snapshotSerializers: ['my-serializer']
};

在您的自定义序列化程序中，您可以覆盖 test 方法并返回序列化的组件代码。

const React = require('react');
const ReactDOMServer = require('react-dom/server');

module.exports = {
  test(value) {
    return value && value.$$typeof === Symbol.for('react.test.json');
  },
  print(value, serialize, indent) {
    const html = ReactDOMServer.renderToStaticMarkup(value);
    return serialize(html);
  },
};

总结

Jest snapshot 测试是一个强大的测试方法，可以帮助您更快地执行测试并确保您的组件按照预期工作。在使用 Jest snapshot 测试时，请记住要测试尽可能多的组件变化点，并谨慎更新您的快照文件。通过优化您的组件并使用 Jest 提供的一些技巧来增强测试的深度和准确性，帮助您提高-test覆盖率。

更多的文档和示例代码，请参考 Jest 官方网站：https://jestjs.io/docs/snapshot-testing

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a3ae55add4f0e0ffbd2283

Jest snapshot 测试实践总结

纠错反馈