在 React 中，组件之间的嵌套是很常见的，尤其在大型项目中。测试嵌套组件可能会比测试简单组件更困难，但使用 Enzyme 函数库可以轻松解决这个问题。
Enzyme 是 AirBnb 开发的一个测试 React 组件的函数库，它提供了一个简洁而强大的 API。它可以让你轻松地渲染组件，以及在组件上执行各种测试。在这篇文章中，我们将深入了解如何在嵌套的 React 组件中使用 Enzyme 进行测试。
安装 Enzyme
使用 npm 命令行工具安装 Enzyme，使用以下命令即可：
npm install --save-dev enzyme enzyme-adapter-react-16
注：其中 enzyme-adapter-react-16 是需要适配到你的 React 版本，本篇文章以 React 16 为例。
编写测试用例
为了演示 Enzyme 在嵌套组件中测试的能力，让我们编写一个简单的例子。
我们将创建两个组件：Parent 和 Child。 Parent 组件将包含 Child 组件。我们将在这些组件中使用 Enzyme，以及 Jest （React 推荐的测试框架）来编写测试用例。
父组件：Parent
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- ----------
----- ------ ------- --------- -
-------- -
------ -
-----
---------- --------------
------ --
------
--
-
-
------ ------- -------子组件：Child
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----- ------- --------- -
-------- -
------ -
-----
--------- --------------
------- ------- --- ---- -------------
------
--
-
-
------ ------- ------测试用例：Parent.test.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - --------------- ----
----------------------------------
---
---------- ------- - ----- ----------- -- -- -
----- ------- - --------------- ----
---------------------------------------------
---
---在以上测试用例中，我们使用了两个测试。第一个测试检查父组件是否被正确渲染了。第二个测试检查 Parent 组件是否含有一个 Child 组件。
深层嵌套
现在，我们增加一下深层嵌套的情况。我们将创建一个 GrandChild 子组件，并在 Child 组件中嵌套它。
孙组件：GrandChild
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ---------- ------- --------- -
-------- -
------ -
-----
-------------- --------------
------- ------- --- ---- -------------
------
--
-
-
------ ------- -----------嵌套到 Child 组件中
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- ---------------
----- ----- ------- --------- -
-------- -
------ -
-----
--------- --------------
------- ------- --- ---- -------------
----------- --
------
--
-
-
------ ------- ------更改测试用例
我们的测试用例也需要更改了。让我们更新我们的测试用例，以确保我们的新组件被正确测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- -----------
---------------- --------- - ---- --------- -- -- -
---------- ------- - ----- ----------- -- -- -
----- ------- - ------------- ----
---------------------------------------------
---
---------- ------- - ---------- ----------- -- -- -
----- ------- - ------------- ----
--------------------------------------------------
---
---------- ------- ------- ---- -- ------------ -- -- -
----- ------- - ------------- ----
----- ---------- - ---------------------------
- - ---------------------------
------------------------------ ------- --- ---- ------------
---
---在我们的测试用例中，我们使用了三个测试。第一个测试检查父组件是否包含子组件。第二个测试检查子组件是否包含孙组件。第三个测试检查孙组件是否包含正确的文本。
在这个例子中，我们使用了 mount 函数来深度渲染组件。这与 shallow 函数不同，shallow 函数只渲染了组件的第一层。mount 函数渲染了所有嵌套的组件，并允许对它们进行更深入的测试。
结论
使用 Enzyme 函数库，我们可以轻松地测试 React 组件的嵌套结构。在这篇文章中，我们创建了多个嵌套组件，并演示了如何使用 Enzyme 编写测试用例以检查深层嵌套。我希望这篇文章能够帮助你学习如何使用 Enzyme 来测试你的 React 组件。
示例代码
完整的代码可以在这里找到：https://github.com/jack-wellington/enzyme-nested-components-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6732709a0bc820c5823d4c0d