在前端开发的过程中，测试是不可避免的一项工作，它可以帮助开发者提高代码质量和稳定性。而对于 React 开发者来说，Enzyme 和 Jest 是两个常用的测试工具。但是在实际使用中，我们可能会遇到 Enzyme 与 Jest 不兼容的情况，很多测试方法无法正常运行。本文将为大家介绍三种 Enzyme 与 Jest 不兼容的测试方法，以及如何解决它们。
1. 测试 React Portal
在 React 中，Portal 是一种可以将组件渲染到某个 DOM 节点之外的组件。由于它的特殊性，我们需要使用 React 的 createPortal 方法来创建它，并将其挂载到一个指定的 DOM 节点下面。但是，由于 Enzyme 的限制，我们无法在测试中获得将 Portal 组件渲染到指定节点的状态。
解决方法：
可以使用 React 的 Test Utilities 中的 findRenderedDOMComponentWithClass 方法来获取 Portal 渲染到 DOM 树中的 HTML 元素，然后使用 Jest 的 DOM Testing Library 来对元素进行断言。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------------------------------- - ---- -----------------------
------ - ------- ------- - ---- -------------------------
------ ----------- ---- ----------------
-------------------
---------------------- ---- -- -- -
----------- - ------- -- -- -
----- --- - ------------------------------
---------------------------- --- -----
----- -------------- - -------------------------------------- -------------------
------------------------------------
---
----------- - ----- -------- -- -- -
----- - ----------- - - ------------------- ----
----- ----------- - ----------------------------
---------------------------------
---
---2. 测试 React HOC（高阶组件）
在 React 中，HOC 是一个常见的模式，可以将一些重复的逻辑提取出来并应用到多个组件上。然而，由于 Enzyme 的限制，我们无法测试高阶组件提供的新 props 和 state。
解决方法：
可以使用 React 的 Test Utilities 中的 isDOMComponent 方法判断是否渲染后的组件是 HOC 组件，如果是，则可以通过 mock 组件的 props 或 state 来进行测试。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ -------------- ---- -------------------
-------------------------- -- -- -
------------- --- ----- ------- -- -- -
----- ------------- - -- -- ------ ---
----- ----------------- - ------------------------------
----- ------- - ------------------------ ----
----- ----- - ------------------------------------------
------------------------ - ------- - ------ ------- - ---
---------------------------------------------
---
---3. 测试使用 React Context 的组件
在 React 中，Context 能够穿透组件树，控制所有子组件的数据状态。但由于 Enzyme 的 mount 方法只渲染当前组件和其子组件，所以我们无法测试整个组件树中所有组件的数据状态。
解决方法：
可以将测试库选择为 react-testing-library，它使用的是组件的真实 DOM，因此可以测试整个组件树中所有子组件的数据状态。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ - ------------ - ---- -----------------
------ ------------------ ---- -----------------------
----------------------------- ---- -- -- -
----------- --------- ---- ----- -- ------- -- -- -
----- ----- - - ----------- -------- ------ ------- --
----- - ----------- - - ----------------------------- --------------------------------- ----------------------------
----- ------ - ------------------------------------
------------------------------------------------------ -------------------- ------ ------------------
---
----------- --------- ---- ----- -- ------ -- -- -
----- ----- - - ----------- -------- ------ ------- --
----- - ----------- - - ----------------------------- --------------------------------- ----------------------------
----- ------ - ------------------------------------
------------------------------------------------------ -------------------- ------ ------------------
---
---最后，总结一下本文讲解的三种 Enzyme 与 Jest 不兼容的测试方法以及解决方案：
- 测试 React Portal：使用 React 的 Test Utilities 中的 findRenderedDOMComponentWithClass 方法和 Jest 的 DOM Testing Library。
- 测试 React HOC：使用 React 的 Test Utilities 中的 isDOMComponent 方法和 mock 组件的 props 或 state。
- 测试使用 React Context 的组件：使用 react-testing-library 选择渲染组件，测试整个组件树中所有子组件的数据状态。
希望本文能够帮助大家更好地理解 Enzyme 和 Jest 在测试中的不兼容问题，提高测试的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a37122add4f0e0ffb95d64