如何在 Enzyme 中测试父组件向子组件传递的函数？
在 React 开发中，父组件向子组件传递函数是非常常见的需求。但是如何测试这些逻辑呢？本文将为你介绍如何使用 Enzyme 进行测试。首先简单介绍一下 Enzyme。
Enzyme 是 React 测试工具库之一，它提供了一系列的 API 可以协助 React 组件的测试。Enzyme 是由 Airbnb 开发，支持模拟浏览器环境，可以对 React 组件进行 render、mount、shallow 等多种渲染方式，更加贴近真实的生命周期和行为，支持链式调用等特性。
进行父组件向子组件传递函数的测试，我们可以采用 shallow() 方法。shallow() 只渲染父组件，并不渲染子组件，从而降低测试的难度。我们可以通过测试是否真正调用了传递进去的函数，来判断测试是否通过。下面结合代码给大家演示一下。
我们可以先写一个父组件，里面传递一个函数给子组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
----- --------------- ------- --------------- -
------------- -
-----------------------
-
-------- -
------ -
-----
--------------- -------------------------- --
------
--
-
-
------ ------- ----------------接着我们再写对应的子组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------------- ------- --------------- -
-------- -
------ ------- ---------------------------------- ------------
-
-
------ ------- ---------------有了父子组件之后，我们就可以进行测试了。我们可以编写一个单元测试文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------------- ---- --------------------
------ --------------- ---- ---------------------
-------------------------- ---- -- -- -
---------- ---- ----------- ---- --- ------ -- --------- -- -- -
----- --------------- - ----------
----- ------- - ------------------------ ------------------------- ----
-----------------------------------------------
-------------------------------------------
---
---我们首先在测试文件中导入了 Enzyme 中提供的 shallow() 方法，然后导入了 ParentComponent 和 ChildComponent。接着我们编写了一个测试用例，测试是否点击子组件时能调用父组件传递的函数。在测试用例中我们使用了 jest.fn() 来模拟 handleClick 方法，用于判断是否真正调用了传递进去的函数。接着使用 shallow() 方法创建了包裹父组件的渲染器，通过 wrapper.find(ChildComponent).simulate('click') 模拟点击子组件的按钮，然后判断 mockHandleClick 是否被调用了。
总结：
这是我们用 Enzyme 进行测试父组件向子组件传递函数的方法。通过这种方式可以有效地测试组件之间的互动，使得我们的项目更加稳定可靠。Enzyme 还有许多高级 API 可以使用，感兴趣的同学可以深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654b4ff97d4982a6eb534763