在 React 开发中，测试是非常重要的一环。而 Enzyme 是一个流行的 React 测试工具，它可以让我们方便地测试组件的行为和状态。其中，快照测试是一种非常常见的测试方法，它可以检查组件的渲染结果是否符合预期。但是，当组件变得越来越复杂时，快照测试的比较会变得越来越困难。本文将介绍一些优化快照比较的方法，帮助你在使用 Enzyme 测试 React 组件时更加高效地进行开发。
什么是快照测试
快照测试是一种测试方法，它可以检查组件的输出是否与预期的输出相同。在 React 中，我们可以使用 Jest 来进行快照测试。Jest 是一个流行的 JavaScript 测试框架，它内置了快照测试功能。我们可以使用 Jest 提供的 toMatchSnapshot() 函数来生成组件的快照，并将其保存在文件中。当我们再次运行测试时，Jest 会加载之前保存的快照，并将其与当前的组件输出进行比较，从而判断组件是否出现了变化。
快照测试的好处在于，它可以帮助我们快速检查组件的输出是否发生了变化。这对于组件的稳定性和可维护性非常重要。当我们修改了组件的代码时，如果快照测试失败了，那么我们就可以立即知道这个修改是否对组件输出产生了影响。这样，我们就可以更加自信地进行代码修改，而不必担心会对组件的其他部分产生意外的影响。
快照比较的挑战
虽然快照测试非常有用，但是当组件变得越来越复杂时，快照比较就会变得越来越困难。这是因为组件的输出可能包含大量的嵌套标签和属性，而这些标签和属性的顺序、格式和值可能会发生变化。这就导致了快照比较变得非常敏感，即使是微小的输出变化也会导致测试失败。
举个例子，假设我们有一个简单的 React 组件：
-------- ------------- -
------ -
-----
---------- -----------
------- -- - ---------
------
--
-我们可以使用 Jest 的 toMatchSnapshot() 函数来生成这个组件的快照：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---运行测试后，Jest 会将组件的快照保存在一个 .snap 文件中。这个文件的内容可能会像这样：
-----
----
------ ------
-----
---
---- -- - -----
----
------当我们再次运行测试时，Jest 会将当前组件的输出与之前保存的快照进行比较。如果两者不同，测试就会失败。
但是，当我们修改了组件的代码时，快照比较可能会变得非常敏感。比如，如果我们将 p 标签的文本内容修改为大写字母：
-------- ------------- -
------ -
-----
---------- -----------
------- -- - ---------
------
--
-再次运行测试时，Jest 会检测到组件的输出已经发生了变化，因此测试会失败。这时，我们需要手动更新快照文件，或者使用 --updateSnapshot 选项来自动更新快照文件。但这样做并不是一个好的解决方案，因为它可能会掩盖实际的问题。如果我们不小心修改了组件的输出，但是测试没有失败，那么我们就可能会忽略这个问题，从而导致更严重的后果。
优化快照比较的方法
为了避免快照比较的敏感性，我们可以采用一些优化方法。这些方法可以帮助我们更加准确地比较组件的输出，从而降低测试的错误率和维护成本。
1. 使用 toMatchSnapshot() 的选项
Jest 的 toMatchSnapshot() 函数提供了一些选项，可以帮助我们更加精细地控制快照比较的行为。其中，最常用的选项是 snapshotSerializers，它可以定义一个函数，用于将组件的输出序列化为一个字符串。这个字符串可以包含组件的标签、属性和文本内容，但是它们的顺序、格式和值可以被规范化，从而使快照比较更加稳定。
举个例子，假设我们有一个包含了多个属性的组件：
-------- ------------- ------ --------- ------- -- -
------ -
-----
----------------
-------------------
----------------
------
--
-我们可以定义一个序列化函数，将组件的输出序列化为一个字符串：
-------- ------------------ - ------ ------------------------ - ------------------------------ ---------- ---
这个函数会使用 Enzyme 的 shallow() 函数来将组件渲染为一个浅层次的虚拟 DOM，然后将其序列化为一个字符串。这里我们只序列化了组件的 HTML 内容，但是你也可以序列化其他的属性，比如 CSS 样式、事件处理函数等。
在使用了这个序列化函数后，我们可以再次运行测试，它会生成一个更加稳定的快照，并将其保存在文件中。当我们修改了组件的代码时，Jest 会使用这个序列化函数来生成新的快照，并将其与之前的快照进行比较。这样，即使我们修改了组件的输出，但是它们的顺序、格式和值仍然相同，测试也不会失败。
2. 使用 toHaveStyle() 来比较 CSS 样式
在 React 组件中，我们经常需要使用 CSS 样式来控制组件的外观和布局。但是在快照测试中，比较 CSS 样式可能会变得非常困难。因为 CSS 样式可能包含大量的属性和值，它们的顺序和格式可能会发生变化，从而导致快照比较变得敏感。
为了避免这个问题，我们可以使用 Enzyme 的 toHaveStyle() 函数来比较 CSS 样式。这个函数可以将 CSS 样式转换为一个对象，并将其与预期的样式进行比较。这样，即使 CSS 样式的顺序和格式发生了变化，我们仍然可以比较它们的值，从而保证测试的准确性。
举个例子，假设我们有一个包含了 CSS 样式的组件：
-------- ------------- ----- -- -
------ -
---- -------- ---------------- ------ ----- ---
------ ------
------
--
-我们可以使用 Enzyme 的 toHaveStyle() 函数来检查组件的样式是否正确：
------- ------- -------- -- -- -
----- ------- - -------------------- ------------ ----
-----------------------------
---------------- ------
------ -------
---
---这个函数会将组件的样式转换为一个对象，然后将其与预期的样式进行比较。如果样式不匹配，测试就会失败。
3. 使用 enzyme-to-json 来序列化组件
Enzyme 提供了 enzyme-to-json 这个工具，它可以将 Enzyme 的输出序列化为一个 JSON 对象。这个 JSON 对象可以包含组件的标签、属性和文本内容，但是它们的顺序、格式和值可以被规范化，从而使快照比较更加稳定。
举个例子，假设我们有一个包含了多个属性的组件：
-------- ------------- ------ --------- ------- -- -
------ -
-----
----------------
-------------------
----------------
------
--
-我们可以使用 enzyme-to-json 来将这个组件序列化为一个 JSON 对象：
------ ------ ---- ----------------- ----------- ----------- -- -- - ----- ------- - -------------------- ---- ------------------------------------------ ---
这个函数会将组件序列化为一个 JSON 对象，并将其保存在一个 .snap 文件中。当我们修改了组件的代码时，Jest 会使用这个序列化函数来生成新的快照，并将其与之前的快照进行比较。这样，即使我们修改了组件的输出，但是它们的顺序、格式和值仍然相同，测试也不会失败。
总结
在使用 Enzyme 测试 React 组件时，快照测试是一种非常常见的测试方法。但是，当组件变得越来越复杂时，快照比较就会变得越来越困难。为了优化快照比较，我们可以采用一些优化方法，比如使用 toMatchSnapshot() 的选项、使用 toHaveStyle() 来比较 CSS 样式、使用 enzyme-to-json 来序列化组件等。这些方法可以帮助我们更加准确地比较组件的输出，从而降低测试的错误率和维护成本。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6605efbbd10417a2223cd725