React Portal 是一种非常有用的特性。它可以让我们在 React 应用中渲染层级高于元素树的组件。这使得我们可以轻松创建一些很难在普通的元素树中实现的功能，比如模态框、多级下拉菜单等。但是，在测试这些组件时，就需要一些额外的工作。本文将介绍如何使用 Enzyme 测试 React Portal。
什么是 Enzyme？
Enzyme 是 Airbnb 出品的一个 React 组件测试工具库，它提供了一些方便的 API，可以让我们轻松地模拟组件的渲染，并方便地操作组件的 props 和 state，以及模拟用户的操作。Enzyme 有三种模式：Shallow、Mount、Render，不同的模式适合不同的测试场景。详情可以参考 Enzyme 官方文档。
测试 React Portal
在测试 React Portal 之前，我们需要先了解 Portal 的具体实现方式。React 中 Portal 的原理就是将组件渲染到指定的目标容器中。在 React 中，我们可以使用 ReactDOM.createPortal 方法来创建一个 Portal 。其中，第一个参数是要渲染的元素，第二个参数是要渲染到的容器。
下面是一个简单的例子：
-- -------------------- ---- -------
----- ----------- - -- -------- -- -- -
----- --------- - -------------------------------------
------ ------------------------------- ----------
-
----- ----- - -- -- -
------ -
-------------
---- -----------------------------
---- --------------------------
--------- ----------
-------- -----------
------
------
--------------
-
-在这个例子中，我们创建了一个名为 Modal 的组件，它通过 ModalPortal 渲染到了 modal-root 容器中。
接下来，我们看一下如何测试这个 Modal 组件。
首先，我们需要创建一个测试用例，并使用 mount 方法渲染 Modal 组件。在渲染完成后，我们就可以通过选择器或者其他方法找到 Modal 中的元素并进行断言。
it('should render modal properly', () => {
const wrapper = mount(<Modal />)
expect(wrapper.find('.modal-background').exists()).toBe(true)
expect(wrapper.find('.modal-content').exists()).toBe(true)
})这段代码非常简单，我们使用 mount 方法渲染 Modal 组件，并判断 .modal-background 和 .modal-content 元素是否存在。
但是，如果我们希望测试一些需要在 modal-root 容器中进行的操作，比如弹框等。我们需要将 ModalPortal 的容器挪到 document.body 的直接子节点，否则你的测试用例将失败。
在测试之前，我们需要先将 ModalPortal 的容器挪到 document.body 的直接子节点。
-- -------------------- ---- -------
----- ----------- - -- -------- -- -- -
----- ------------- - ----------- -- -
----- -- - -----------------------------
--------------------- -------------
-----------------------------
------ --
--
------ ------------------------------- ------------
-这里我们使用了 useState 以及一个自执行函数来创建一个 modalPortal 元素，并将它加到 document.body 的直接子节点。
接下来，我们就可以开始测试了。
-- -------------------- ---- ------- ---------- ------ ----- ---- ---- -- ------ -- -- - ----- ------- - ------------ --- -------------------------------------------------------------- ----------------------------------------------------------- ------------------ ----- ---- -- ------------------------------------------------------------- ---------------------------------------------------------- --
在这个测试中，我们首先检查渲染之后，.modal-background 和 .modal-content 元素是否存在，它们都应该不存在，因为 Modal 组件的 open 属性是 false。然后，我们通过调用 setProps 方法，将 open 属性设置为 true。接着，我们再次检查 .modal-background 和 .modal-content 元素是否存在，这次应该都存在了。
至此，我们就成功地测试了一个 React Portal。
结论
测试 React Portal 需要注意一些特殊情况，因为这种组件渲染到了普通组件树之外。但是，使用 Enzyme 却可以让我们轻松地测试这种组件。本文提供了一些实用的技巧，希望可以对你的测试工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6731ae960bc820c58239c9d2