测试 React 组件时使用 Enzyme 遇到的 6 个常见问题
在 React 前端开发中，组件化编程是一个常见的技术，使用 Enzyme 进行组件测试则是非常必要的一步。但是在使用 Enzyme 进行组件测试时，我们可能会遇到一些常见问题。接下来我们将逐一介绍。
问题一：无法使用 css 选择器定位元素
Enzyme 的 find 方法只能通过 props、classes、标签名等属性进行元素定位，无法通过 css selector 进行定位。如果想使用 css selector 定位元素，可以使用 cheerio 这个库，它可以将 React 渲染的组件转换为 HTML 字符串，然后通过选择器定位元素。代码如下：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ------- ---- ----------
------ ----------- ---- ----------------
-------------- ------------- -- -- -
---------- ------ ---- ------------------------- ------------- -- -- -
----- ------- - ------------------ ----
----- ---- - ---------------
----- - - -------------------
----- ------- - --------------
---------------------------------- --------
---
---问题二：无法测试组件内部的函数
组件中的函数都是私有的，而 Enzyme 只能够获取组件的公开方法和状态。但是如果想要测试组件中的私有函数，可以使用 instance 方法获取组件实例，然后直接调用函数进行测试。
下面是一个例子，假设有一个组件 MyComponent 包含了一个私有方法 _getValue，用于返回组件状态的值。那么我们可以通过以下方法进行测试：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
-------------- ------------- -- -- -
---------- ------ - ---- ------- ----------- -- -- -
----- ------- - ------------------ ----
----- -------- - -------------------
-------------------------------------
---
---问题三：无法测试使用 React.createPortal 渲染的组件
如果组件使用了 React.createPortal 渲染到外部 dom 中，使用 Enzyme 进行测试时会遇到问题。解决方法是在测试之前将组件挂载到 root 节点下，进行测试后再移除。
下面是一个例子，假设有一个组件 MyComponent，在组件的 render 方法中使用了 React.createPortal 渲染到 document.body 中。那么我们可以通过以下方法进行测试：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
-------------- ------------- -- -- -
---------- ------ ---- ------------------------- ------------- -- -- -
----- ------- - ------------------ ----
------------------------------------------------
----- ------- - -----------------------------------
--------------------------------------- --------
------------------------------------------------
---
---问题四：无法测试使用 Redux 管理状态的组件
如果组件使用了 Redux 管理状态，那么在进行测试时需要使用 redux-mock-store 库来模拟 Redux 状态，同时使用 Provider 组件将模拟的状态传递给组件。
下面是一个例子，假设有一个组件 MyComponent 需要从 Redux 中获取状态并展示到页面中，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- ----------- ------- --------- -
-------- -
----- - ---- - - -----------
------ ---- ------------------------- -------------
-
-
----- --------------- - ----- -- -
------ -
----- -----------
--
--
------ ------- --------------------------------------那么我们可以通过以下方法进行测试：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ -------------- ---- -------------------
------ - -------- - ---- --------------
------ ----------- ---- ----------------
-------------- ------------- -- -- -
---------- ------ ---- ------------------------- ------------ -- -- -
----- --------- - -------------------
----- ----- - ----------- ----- ------ ---
----- ------- - ------
--------- --------------
------------ --
-----------
--
----- ------- - -------------------------
---------------------------------- -------
---
---问题五：无法测试组件的 life cycle 方法
如果想要测试组件的 life cycle 方法，可以使用 Sinon 来修改方法，将方法中的逻辑进行覆盖，然后测试覆盖后的逻辑是否得到了正确执行。
下面是一个例子，假设有一个组件 MyComponent 包含了一个 componentDidMount 方法，用于向服务器发送请求获取数据，并将数据存储到组件状态中。那么我们可以通过以下方法进行测试：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ----------------
-------------- ------------- -- -- -
---------- ---- -------- ---- ------------------- -- -- -
----- --- - -------------------------------- ------------
----- ------- - ------------------ ----
---------------------------------------
--------------------------------
---
---问题六：无法测试 React Hooks
与组件的 life cycle 方法类似，如果想要测试 React Hooks，可以使用 Sinon 来模拟 React Hooks 的逻辑，在测试中使用模拟的 hooks 逻辑来替换组件中真实的 hooks 逻辑。同时还需要使用 act 方法来模拟 hooks 执行的过程，并且使用 useFakeTimers 来协助测试 hooks 中使用定时器的逻辑。
下面是一个例子，假设有一个组件 MyComponent 使用了 React Hooks 来管理状态，如下所示：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
----- ----------- - -- -- -
----- ------- --------- - ------------
------------ -- -
------------- -- -
------------
-- ------
-- ----
------ -------------------
--
------ ------- ------------那么我们可以通过以下方法进行测试：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ----------------
-------------- ------------- -- -- -
---------- --- ----- -- - ----- - -------- -- -- -
----- ----- - ----------------------
----- ------- - ------------------ ----
---------------------------------------------
-----------------
---------------------------------------------
----------------
---
---以上就是使用 Enzyme 进行组件测试时可能遇到的 6 个常见问题及解决方法。希望本文能够提供给读者一些有用的技术指导，帮助大家更好地进行前端开发。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6781be1f935627c900e90b71