在前端开发过程中，我们经常需要测试组件的正确性。Enzyme 是 React 生态中响应式组件渲染器的一部分，也是一种流行的测试工具，可以帮助我们更轻松地测试 React 组件。然而，使用 Enzyme 测试静态组件时，我们可能会遇到一些问题，本文将讨论这些问题及其解决方案。
问题一：如何测试组件是否正确地渲染？
考虑以下组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------- -- ---- ---------
------
--
-
-
------ ------- ----我们可以使用这样的测试来确保这个组件能够正确地渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------- ----
------------------------------------------------- ---------
---------------------------------------------- -- ---- --------
------------------
---
---我们使用 mount 函数将组件挂载到虚拟 DOM 中，然后查找 h1 和 p 元素并验证它们的文本内容是否正确。最后，我们使用 unmount 函数将组件卸载。
问题二：如何测试被包装在高阶组件中的组件？
高阶组件是装饰一个组件的函数。在本例中，我们将测试以下的高阶组件和 WrappedComponent：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------------------ - --------- -- -
----- ---------------- ------- --------------- -
-------- -
------ -
-----
---------- ----- --------------
---------- --
------
--
-
-
------ -----------------
--
----- --- ------- --------------- -
-------- -
------ ------- -- ---- ----------
-
-
------ ------- ------------------------------在这个例子中，我们使用 withHigherOrderComponent 函数装饰 App 组件，添加了一个 h1 元素，并将 App 组件嵌套在其中。然而，我们如何在测试中解决这个问题？
我们可以使用 shallow 函数来测试高阶组件，而不是在测试中直接使用 withHigherOrderComponent 函数。Enzyme 会自动渲染包装的组件。我们可以运行以下测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------ ----
------------------------------------------------- ----- ------------
---------------------------------------------- -- ---- --------
------------------
---
---注意我们仍然使用 App 组件来运行测试，而不是包装的组件。这个测试应该能够通过。
问题三：如何测试不在 render 函数中渲染的内容？
有时，组件中的内容不是在 render 函数中渲染的。在这种情况下，我们应该如何测试它？
考虑以下组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -
--
-
------------- - -- -- -
--------------- -------- ------------------ - - ---
-
-------- -
------ -
-----
---------- -----------
------ ------- --- ------ -------------------- ----------
------- ---------------------------------- ------------
------
--
-
-
------ ------- ----这个组件中的内容不是在 render 函数中渲染的，而是在 handleOnClick 方法中更新状态。我们将如何为此编写测试？
我们可以使用 simulate 函数来模拟点击事件，并验证组件的状态是否已更新。以下是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- ------ ----- ---- ------ -- --------- -- -- -
----- ------- - ---------- ----
----- ------ - -----------------------
-------------------------
-------------------------
--------------------------------------------- ------- --- ------ - ---------
------------------
---
---我们首先使用 mount 函数将组件挂载到虚拟 DOM 中。然后，我们使用 find 函数查找 button 元素，并使用 simulate 函数模拟点击事件。最后，我们验证 p 元素的文本内容是否已更新。这个测试应该能够通过。
小结
在本文中，我们讨论了使用 Enzyme 测试静态组件时可能遇到的一些问题，以及解决这些问题的几种方法。我们学习了如何使用 mount 和 shallow 函数来测试组件，以及如何使用 simulate 函数来测试不在 render 函数中渲染的内容。我们希望本文对您测试 React 组件时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67831338935627c9002884a1
