在 React 应用中，经常会有父组件调用子组件的方法的情况。这时候，我们需要测试这个过程是否正常。Enzyme 是 React 测试工具之一，可以帮助我们测试这个过程。
Enzyme 简介
Enzyme 是 Airbnb 开源的 React 测试工具，提供了一种易于使用的 API，可以帮助我们测试 React 组件的输出、行为和状态。Enzyme 支持三种渲染方式：shallow、mount 和 render。
- shallow：只渲染当前组件，不渲染子组件。
- mount：渲染当前组件以及子组件，并挂载到真实的 DOM 上。
- render：渲染当前组件以及子组件，但不挂载到真实的 DOM 上，而是返回一个静态的 HTML 字符串。
在本文中，我们将使用 shallow 渲染方式进行测试。
测试场景
假设我们有一个父组件 Parent 和一个子组件 Child。Parent 组件中有一个方法 handleClick，调用 Child 组件中的方法 handleChildClick。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------
----- ------ ------- --------------- -
------------- -
-------------------------
-
-------- -
------ -
-----
------- -------------------------------- -----------
------ --
------
--
-
-
------ ------- -------我们需要测试当点击按钮时，是否能够触发 Child 组件中的 handleChildClick 方法。
测试方法
首先，我们需要安装 Enzyme 和相应的适配器。我们使用 Enzyme 的最新版本 4.x，适配器使用 enzyme-adapter-react-16。
npm install --save-dev enzyme enzyme-adapter-react-16
然后，在测试文件中，我们需要引入 configure 方法来设置 Enzyme 的适配器。我们使用 shallow 方法来渲染 Parent 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ------- - ---- ---------
------ ------- ---- --------------------------
------ ------ ---- -----------
----------- -------- --- --------- ---
---------------- ----------- -- -- -
---------- ---- ----- --------- ------ ---- ------ -- --------- -- -- -
----- ------- - --------------- ----
----- -------- - -------------------------------------------- --------------------
----- ------ - -----------------------
-------------------------
------------------------------------
---
---在测试中，我们使用 jest.spyOn 方法来监听 Child 组件中的 handleChildClick 方法是否被调用。然后，我们模拟点击按钮，判断方法是否被调用。
结论
在本文中，我们使用 Enzyme 测试工具来测试父组件方法中调用子组件方法的场景。我们通过监听子组件方法是否被调用来判断测试是否通过。Enzyme 提供了易于使用的 API，方便我们进行组件测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6767847b98e3e1ab1a78a27c