在 React 开发中，组件是非常重要的概念。在编写组件时，我们通常需要测试每个组件的行为和输出，以确保其正常工作。Enzyme 是一款用于测试 React 组件的 JavaScript 库，它提供了简单易用的 API，可以帮助我们轻松地测试组件的行为和输出。
本文将介绍如何使用 Enzyme 测试 React 组件中的子组件，包括如何安装和使用 Enzyme，如何编写测试用例，以及如何处理子组件的测试。
安装和使用 Enzyme
在开始使用 Enzyme 之前，我们需要先安装它。可以使用 npm 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
然后，我们需要在测试文件中导入 Enzyme，并配置适配器：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });现在，我们已经成功安装和配置了 Enzyme，可以开始编写测试用例了。
编写测试用例
在编写测试用例时，我们需要首先创建一个包含被测试组件的测试环境。可以使用 Enzyme 的 mount 函数创建测试环境：
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);在创建测试环境后，我们可以使用 Enzyme 提供的 API 来测试组件的行为和输出。下面是一些常用的 API：
find(selector)：查找匹配给定选择器的子元素，返回一个包含所有匹配元素的Wrapper对象。simulate(event[, ...args])：模拟触发指定事件，可以传递参数。props()：获取组件的属性。state([key])：获取组件的状态，可以传递参数。text()：获取组件的文本内容。html()：获取组件的 HTML 内容。
下面是一个示例测试用例，测试一个包含子组件的父组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ ----- ----------- -- -- -
----- ------- - ------------- ----
---------------------------------------------
---
---------- ---- ----- -- ----- ----------- -- -- -
----- ------- - ------------- ----
---------------------------------------------------------- ---------
---
---------- ------ ----- ---- ------ -- --------- -- -- -
----- ------- - ------------- ----
----- ------ - -----------------------
-------------------------
---------------------------------------
---
---在上面的测试用例中，我们测试了 Parent 组件中包含 Child 组件，Parent 组件将 message 属性传递给 Child 组件，以及 Parent 组件中的按钮被点击后会更新状态。
处理子组件的测试
在测试包含子组件的父组件时，我们需要测试子组件的行为和输出。可以使用 Enzyme 的 find 函数查找子组件并测试其行为和输出。
下面是一个包含子组件的父组件和相应的测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
------ -
--
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
------ --------------- ------- --
------- -------------------------------- -----------
------ ------- ------------------ ---------
------
--
-
-
------ ------- --------- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- -----------
---------------- ----------- -- -- -
---------- ------ ----- ----------- -- -- -
----- ------- - ------------- ----
---------------------------------------------
---
---------- ---- ----- -- ----- ----------- -- -- -
----- ------- - ------------- ----
---------------------------------------------------------- ---------
---
---------- ------ ----- ---- ------ -- --------- -- -- -
----- ------- - ------------- ----
----- ------ - -----------------------
-------------------------
---------------------------------------
---
---------- ------ ----- --------- ---- ----- -- --------- -- -- -
----- ------- - ------------- ----
----- ------ - -----------------------
-------------------------
----------------------------------------------------
---
---在上面的测试用例中，我们测试了 Parent 组件中包含 Child 组件，Parent 组件将 message 属性传递给 Child 组件，以及 Parent 组件中的按钮被点击后会更新状态。我们还测试了当状态更新时，Child 组件也会更新。
结论
使用 Enzyme 测试 React 组件中的子组件非常简单，只需使用 Enzyme 提供的 API 查找子组件并测试其行为和输出。在编写测试用例时，我们需要创建一个包含被测试组件的测试环境，并使用 Enzyme 提供的 API 测试组件的行为和输出。在测试包含子组件的父组件时，我们需要测试子组件的行为和输出，可以使用 Enzyme 的 find 函数查找子组件并测试其行为和输出。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6757a688890bd9faa436d44a