React Portals 是一个很好的解决方案，可以让我们将 React 组件渲染到 DOM 树中任意位置的容器中，而不需要直接位于组件的父元素下。这样有助于我们更灵活地管理组件，但是由于组件被渲染到了 DOM 树之外，当我们想要进行测试时，就需要使用一些特殊的方法来测试它们。在本文中，我们将介绍如何使用 Enzyme 的 mount 方法来测试 React Portals，以及如何加强测试用例的同时遵守最佳实践。
测试 React Portals 的原因
在 React 组件中使用 Portals 通常有两个原因：
- 处理 CSS 样式层级问题
- 在应用程序中浮动 UI 元素，如对话框、工具提示和下拉菜单等。
在开发应用程序时，使用 React Portals 可以帮助我们更加灵活地管理应用程序中的 UI 元素，并解决一些常见的问题，例如样式层级问题、布局问题等。但是，由于组件被渲染到了 DOM 树之外，测试 React Portals 需要使用 Enzyme 的 mount 方法进行组件的渲染。
使用 Enzyme 的 mount 方法测试 React Portals
在使用 Enzyme 的 mount 方法测试 React Portals 时，需要了解一些基本知识。例如，为了测试弹出窗口等受 React Portals 控制的组件，需要将组件的根节点挂载在全局命名空间的基础上进行测试。
在下面的示例中，我们将使用一个弹出窗口作为 React Portals 的例子，展示如何使用 Enzyme 的 mount 方法进行测试。
------ ----- ---- --------
------ -------------- ---- ------------
----- --------- - --------------------------------------
----- ----- ------- --------------- -
-- - ------------------------------
------------------- -
-------------------------------
-
---------------------- -
-------------------------------
-
-------- -
------ -------------
---- ----------------------------------------------
-------
--
-
-
------ ------- ------在这个例子中，我们创建了一个 Modal 组件，它使用 createPortal() 方法将 Modal 中的 HTML 元素转移到了
容器中。这意味着 Modal 组件的子元素不会再被 Modal 的父元素包含，而是被挂载在了 modalRoot 中。下面是 React 组件测试代码：
------ ----- ---- --------
------ ------- ---- ---------
------ ----- ---- ----------
--------------- --------- ------ -- -- -
--- --------
------------ -- -
------- - ------
-----
---- ----------------- --
-------
---- ----------------- --
--------
------
--
---
---------- ------ -------- ------ ------- -- -- -
--------------------------- --------------------------
---
---------- ------- -------- ----- ----- -- ----------- -- -- -
------------------
--------------------------------------------------------------------------------
---
---在上面的例子中，我们使用 Enzyme 的 mount 方法来渲染 Modal 组件。我们将根节点包裹在一个 div 内，并将 Modal 组件作为子元素传递给该 div。
第一个测试用例测试 Modal 组件是否将其子元素正确地渲染到了 modalRoot 中。我们可以使用 Enzyme 的 find() 方法查找 “.modal .inner” 类的元素来验证。
第二个测试用例测试当 Modal 组件被卸载时，组件中的元素是否能够正确地从 DOM 树中删除。我们可以使用 Enzyme 的 unmount() 方法手动卸载 Modal 组件，然后使用 vanilla JavaScript 检查文档中是否包含 Modal 组件的根节点。
结论
在这篇文章中，我们简要介绍了 React Portals 的用途以及如何使用 Enzyme 的 mount 方法测试 React 组件中的 React Portals。通过使用 React Portals，我们可以更加灵活地管理 React 组件，并通过使用 Enzyme 的 API 编写测试用例来提高代码质量。这些测试用例将帮助我们发现应用程序中的错误并提高开发效率，为前端工程师提供更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6704c320d91dce0dc8502100