如何在 Enzyme 中测试被 React.memo() 包裹的组件
React.memo() 是在 React v16.6 中被引入的一个高阶函数，可以用来帮助我们优化组件的性能。它的作用是在渲染组件之前对组件的 props 进行浅比较，只有当 props 发生变化时才会重新渲染组件。
但是在进行测试的时候，我们需要确保我们的组件的渲染是正确的。在这篇文章中，我们将学习如何使用 Enzyme 来测试被 React.memo() 包裹的组件。
测试组件的代码通常包括四个步骤：
- 渲染组件。
- 操作组件。
- 断言组件行为是否正确。
- 卸载组件。
由于 React.memo() 的作用，我们需要确保我们的测试代码也能够正常地处理被包裹的组件。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------- ---- --------
----- ----------- - -------------------- -- -
------ -
-----
--------------------
------- ----------- -- -------------- - ----------------------
------
-
--
----------------------- -- -- -
----------- --- ------- ------- -- -- -
----- ------- - ------------------ --------- ---
------------------------------------------------
--
-------------- --- ----- ---- ------ -- --------- -- -- -
----- ------- - ------------------ --------- ---
----------------------------------------
------------------------------------------------
--
--在这个示例中，我们使用 Enzyme 的 mount() 函数来渲染 MyComponent 组件。我们的测试代码模拟了点击按钮并检查了这个操作是否成功增加了计数器的值。
需要注意的是，即使我们的组件被 React.memo() 包裹了，我们还是需要像往常一样进行操作和断言。React.memo() 仅仅是处理了组件的渲染，但是它并没有影响组件其他的行为。
当然，如果你想要完全确保你的测试代码能够正确地处理被 React.memo() 包裹的组件，你可以使用 enzyme-react-adapter-hooks。这是一个 specific Enzyme 的适配器，它提供了钩子来正确地处理 React.memo()。
总结
React.memo() 是一个很有用的函数，可以帮助我们在渲染组件的时候提高性能。在测试被 React.memo() 包裹的组件的时候，需要注意它的特性，并使用 Enzyme 的 mount() 函数来渲染组件、模拟操作和断言行为是否正确。当然，使用 enzyme-react-adapter-hooks 也是一个不错的选择。希望这篇文章能够帮助你更好地测试被 React.memo() 包裹的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648286fc48841e98941eac72