如何在使用 Enzyme 测试 React 组件时优化快照比较-JavaScript中文网-JavaScript教程资源分享门户

在 React 开发中，测试是非常重要的一环。而 Enzyme 是一个流行的 React 测试工具，它可以让我们方便地测试组件的行为和状态。其中，快照测试是一种非常常见的测试方法，它可以检查组件的渲染结果是否符合预期。但是，当组件变得越来越复杂时，快照测试的比较会变得越来越困难。本文将介绍一些优化快照比较的方法，帮助你在使用 Enzyme 测试 React 组件时更加高效地进行开发。

什么是快照测试

快照测试是一种测试方法，它可以检查组件的输出是否与预期的输出相同。在 React 中，我们可以使用 Jest 来进行快照测试。Jest 是一个流行的 JavaScript 测试框架，它内置了快照测试功能。我们可以使用 Jest 提供的 toMatchSnapshot() 函数来生成组件的快照，并将其保存在文件中。当我们再次运行测试时，Jest 会加载之前保存的快照，并将其与当前的组件输出进行比较，从而判断组件是否出现了变化。

快照测试的好处在于，它可以帮助我们快速检查组件的输出是否发生了变化。这对于组件的稳定性和可维护性非常重要。当我们修改了组件的代码时，如果快照测试失败了，那么我们就可以立即知道这个修改是否对组件输出产生了影响。这样，我们就可以更加自信地进行代码修改，而不必担心会对组件的其他部分产生意外的影响。

快照比较的挑战

虽然快照测试非常有用，但是当组件变得越来越复杂时，快照比较就会变得越来越困难。这是因为组件的输出可能包含大量的嵌套标签和属性，而这些标签和属性的顺序、格式和值可能会发生变化。这就导致了快照比较变得非常敏感，即使是微小的输出变化也会导致测试失败。

举个例子，假设我们有一个简单的 React 组件：

function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is a test.</p>
    </div>
  );
}

我们可以使用 Jest 的 toMatchSnapshot() 函数来生成这个组件的快照：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------

------ ----------- ---- ----------------

----------------------- -- -- -
  ----------- ----------- -- -- -
    ----- ------- - -------------------- ----
    ----------------------------------
  ---
---

运行测试后，Jest 会将组件的快照保存在一个 .snap 文件中。这个文件的内容可能会像这样：

<div>
  <h1>
    Hello, world!
  </h1>
  <p>
    This is a test.
  </p>
</div>

当我们再次运行测试时，Jest 会将当前组件的输出与之前保存的快照进行比较。如果两者不同，测试就会失败。

但是，当我们修改了组件的代码时，快照比较可能会变得非常敏感。比如，如果我们将 p 标签的文本内容修改为大写字母：

function MyComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>THIS IS A TEST.</p>
    </div>
  );
}

再次运行测试时，Jest 会检测到组件的输出已经发生了变化，因此测试会失败。这时，我们需要手动更新快照文件，或者使用 --updateSnapshot 选项来自动更新快照文件。但这样做并不是一个好的解决方案，因为它可能会掩盖实际的问题。如果我们不小心修改了组件的输出，但是测试没有失败，那么我们就可能会忽略这个问题，从而导致更严重的后果。

优化快照比较的方法

为了避免快照比较的敏感性，我们可以采用一些优化方法。这些方法可以帮助我们更加准确地比较组件的输出，从而降低测试的错误率和维护成本。

1. 使用 `toMatchSnapshot()` 的选项

Jest 的 toMatchSnapshot() 函数提供了一些选项，可以帮助我们更加精细地控制快照比较的行为。其中，最常用的选项是 snapshotSerializers，它可以定义一个函数，用于将组件的输出序列化为一个字符串。这个字符串可以包含组件的标签、属性和文本内容，但是它们的顺序、格式和值可以被规范化，从而使快照比较更加稳定。

举个例子，假设我们有一个包含了多个属性的组件：

-- -------------------- ---- -------
-------- ------------- ------ --------- ------- -- -
  ------ -
    -----
      ----------------
      -------------------
      ----------------
    ------
  --
-

我们可以定义一个序列化函数，将组件的输出序列化为一个字符串：

function serialize(element) {
  return shallow(element).html();
}

expect.addSnapshotSerializer({
  serialize,
});

这个函数会使用 Enzyme 的 shallow() 函数来将组件渲染为一个浅层次的虚拟 DOM，然后将其序列化为一个字符串。这里我们只序列化了组件的 HTML 内容，但是你也可以序列化其他的属性，比如 CSS 样式、事件处理函数等。

在使用了这个序列化函数后，我们可以再次运行测试，它会生成一个更加稳定的快照，并将其保存在文件中。当我们修改了组件的代码时，Jest 会使用这个序列化函数来生成新的快照，并将其与之前的快照进行比较。这样，即使我们修改了组件的输出，但是它们的顺序、格式和值仍然相同，测试也不会失败。

2. 使用 `toHaveStyle()` 来比较 CSS 样式

在 React 组件中，我们经常需要使用 CSS 样式来控制组件的外观和布局。但是在快照测试中，比较 CSS 样式可能会变得非常困难。因为 CSS 样式可能包含大量的属性和值，它们的顺序和格式可能会发生变化，从而导致快照比较变得敏感。

为了避免这个问题，我们可以使用 Enzyme 的 toHaveStyle() 函数来比较 CSS 样式。这个函数可以将 CSS 样式转换为一个对象，并将其与预期的样式进行比较。这样，即使 CSS 样式的顺序和格式发生了变化，我们仍然可以比较它们的值，从而保证测试的准确性。

举个例子，假设我们有一个包含了 CSS 样式的组件：

function MyComponent({ color }) {
  return (
    <div style={{ backgroundColor: 'red', color }}>
      Hello, world!
    </div>
  );
}

我们可以使用 Enzyme 的 toHaveStyle() 函数来检查组件的样式是否正确：

it('has correct styles', () => {
  const wrapper = shallow(<MyComponent color="blue" />);
  expect(wrapper).toHaveStyle({
    backgroundColor: 'red',
    color: 'blue',
  });
});

这个函数会将组件的样式转换为一个对象，然后将其与预期的样式进行比较。如果样式不匹配，测试就会失败。

3. 使用 `enzyme-to-json` 来序列化组件

Enzyme 提供了 enzyme-to-json 这个工具，它可以将 Enzyme 的输出序列化为一个 JSON 对象。这个 JSON 对象可以包含组件的标签、属性和文本内容，但是它们的顺序、格式和值可以被规范化，从而使快照比较更加稳定。

举个例子，假设我们有一个包含了多个属性的组件：

-- -------------------- ---- -------
-------- ------------- ------ --------- ------- -- -
  ------ -
    -----
      ----------------
      -------------------
      ----------------
    ------
  --
-

我们可以使用 enzyme-to-json 来将这个组件序列化为一个 JSON 对象：

import toJson from 'enzyme-to-json';

it('renders correctly', () => {
  const wrapper = shallow(<MyComponent />);
  expect(toJson(wrapper)).toMatchSnapshot();
});

这个函数会将组件序列化为一个 JSON 对象，并将其保存在一个 .snap 文件中。当我们修改了组件的代码时，Jest 会使用这个序列化函数来生成新的快照，并将其与之前的快照进行比较。这样，即使我们修改了组件的输出，但是它们的顺序、格式和值仍然相同，测试也不会失败。

总结

在使用 Enzyme 测试 React 组件时，快照测试是一种非常常见的测试方法。但是，当组件变得越来越复杂时，快照比较就会变得越来越困难。为了优化快照比较，我们可以采用一些优化方法，比如使用 toMatchSnapshot() 的选项、使用 toHaveStyle() 来比较 CSS 样式、使用 enzyme-to-json 来序列化组件等。这些方法可以帮助我们更加准确地比较组件的输出，从而降低测试的错误率和维护成本。

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

如何在使用 Enzyme 测试 React 组件时优化快照比较

什么是快照测试

快照比较的挑战

优化快照比较的方法

1. 使用 toMatchSnapshot() 的选项

2. 使用 toHaveStyle() 来比较 CSS 样式

3. 使用 enzyme-to-json 来序列化组件

总结

1. 使用 `toMatchSnapshot()` 的选项

2. 使用 `toHaveStyle()` 来比较 CSS 样式

3. 使用 `enzyme-to-json` 来序列化组件