在 React 中，Portal 是一种灵活的组件渲染方式，它可以将子组件挂载到 DOM 树的不同位置。但是，在使用 Enzyme 进行组件测试时，渲染 Portal 组件可能会遇到一些困难。本文将介绍如何在 Enzyme 中渲染 React Portal 组件并进行测试。
Portal 组件简介
Portal 是一种将子组件挂载到 DOM 树不同位置的方式。在 Portal 组件中，可以在任何希望渲染子组件的地方使用 ReactDOM.createPortal() 方法将子组件渲染到指定的 DOM 元素中，而不是直接将其添加为普通的子元素。这种方式使得在组件层级结构中嵌套的组件也能够渲染到指定的 DOM 位置上。
例如，以下是一个包含 Portal 组件的简单 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- ----- ------- --------------- -
-------- -
----- - -------- - - -----------
------ ----------------------
---------
--------------------------------------
--
-
-
----- --- ------- --------------- -
-------- -
------ -
-----
---------- -----------
-------
------ -- - -----------
--------
------
--
-
-
-------------------- --- ---------------------------------在上面的代码中，Modal 组件使用了 Portal 将其子组件渲染到 id 为 "modal-root" 的 DOM 元素上。这里可以将 Portal 组件的渲染位置根据需要进行调整。
Enzyme 中的 Portal 组件
在使用 Enzyme 进行组件测试时，需要确保所有组件都已经渲染到了虚拟 DOM 中并且可以进行常规的渲染和测试。Enzyme 提供了一些 API 来支持在测试中使用 Portal 组件。
首先，需要设置一个 div 来作为 Portal 组件的父元素。这可以通过在测试文件中添加以下代码来实现：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
const modalRoot = global.document.createElement('div');
modalRoot.setAttribute('id', 'modal-root');
global.document.body.appendChild(modalRoot);然后，可以使用 Enzyme 的 mount() 方法来进行 Portal 组件的渲染和测试。这个方法可以渲染完整的组件树，并将组件挂载到虚拟 DOM 中：
-- -------------------- ---- -------
------ - ----- - ---- ---------
----------------- -- -- -
---------- ------ -------- ---- --- ----- ------ -- -- -
----- ------- - ------
-------
------ -- - -----------
---------
--
-----------------------------------------------------------
------- -- - -------------
--
------------------
---
---在上面的代码中，使用 mount() 方法将 Modal 组件渲染到虚拟 DOM 中。然后，在测试中查找 id 为 "modal-root" 的 DOM 元素，并检查其第一个子元素是否正确地包含了所期望的内容。
结论
在 Enzyme 中渲染 React Portal 组件需要一些特殊的处理，但只要按照上述方法进行操作，就可以轻松地对包含 Portal 组件的组件进行测试。同时，这也提醒我们，Portal 组件是 React 中一种非常有用的组件渲染方式，特别是在需要控制组件的外观和功能时。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3e018f40ec5a964e575cf