前言
在 React 开发中，Render Props 是一种常见的设计模式。它的主要作用是帮助我们在组件间共享代码逻辑。
Enzyme 是一个专门针对 React 应用开发的 JavaScript 测试工具，可以让我们简单、直观又高效的测试 React 组件。
Enzyme 不仅仅可以用来测试一个 React 组件的状态以及行为，还可以用来测试 Render Props，这在很多场合下都是很必要的。
接下来让我们一起深入了解如何使用 Enzyme 测试 React 组件中的 Render Props。
什么是 Render Props
Render Props 是一种模式，它可以被用来解决组件之间代码逻辑共享的问题。其核心是将一个组件的渲染逻辑封装到一个函数中。这个函数可以在其它组件中被调用，从而实现代码的复用。
一个典型的 Render Props 例子是著名的 Count 简单示例。下面是一个简单的渲染 count 值的组件：
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
-------------- - -- -- -
------------------------- -- -- ------ --------------- - - ----
--
-------- -
------ -
-----
---------- -----------------------
------- -----------------------------------------
------
--
-
-如果我们想在其它组件中使用它，我们可以将 Count 组件的 render 方法封装到一个函数中，这样其它组件就可以共享这些代码逻辑了。
----- ------- ------- --------------- -
-------- -
------ -
-----
------------------------------------ ---------------------
------
--
-
-在 Counter 中，我们插入了 Count。这个例子中的 Counter 只有一个方法，它返回了一个 div，这个 div 中包含 Count。render() 方法接受一个函数作为其入参 this.props.render，这个函数会将 Count 的 state 返回，并且还会传递一个回调函数用来增加 count 的值。它的返回值将会被 Injected 为 Counter 的子组件。
测试 Render Props
要测试 Render Props，我们可以使用 Enzyme 的 shallow 方法。这个方法将会给我们 Render Props 组件的上下文，从而方便我们访问其内部。
考虑一下下面这个简单的 Render Props 例子：
----- ------- ------- --------------- -
----- - -
------ --
--
-------------- - -- -- -
------------------------- -- -- ------ --------------- - - ----
--
-------- -
------ -
-----
------------------------------------ ---------------------
------
--
-
-
----- --- ------- --------------- -
-------- -
------ -
-----
--------
--------------- --------------- -- -
-----
---------- ------------
------- ------------------------------------
------
--
--
------
--
-
-
------ ------- ----我们期望的是, 当 Counter 的按钮被点击时，它的 Count 状态应该会增加。此时, 我们需要首先测试 Counter 的正确性。
我们将使用 jest，enzyme 和 enzyme-adapter-react-16 来测试这个 Render Props。首先，我们需要将 enzyme 安装到我们的项目中。
--- ------- ---------- ------ -----------------------
只要完成了安装操作，我们就可以在测试代码中引入它们了。下面是一个简单的测试例子，同时也是一个渲染器（renderer）。它将会完成以下的几个任务：
- 创建 Enzyme 的 shallow Render Props 组件。
- 模拟按钮点击事件以触发之前定义的
incrementCount回调函数。 - 确认渲染的组件状态是否与预期一致。
------ ------- ---- --------------------------
------ ------- - ------- - ---- ---------
------ ----- ---- --------
------ ------- ---- ------------
------------------ -------- --- --------- ---
------------- ------- ------- ----------- -- -- -
----- ------- - --------
--------
--------------- --------------- -- -
-----
----- --------------------------------
------- ------------------------------------------
------
--
--
--
---------------------------------------------------
-----------------------------------------
---------------------------------------------------
---在这个例子中，我们使用了一个 shallow 渲染器来渲染 Counter 组件。我们将渲染函数的结构传递给了它，同时在 Counter 组件中的回调函数上也做了测试，从而确认 count 是否增加了。
结论
Render Props 是一种优秀的设计模式，可以很好地用于解决组件之间代码逻辑共享的问题。
Enzyme 则是一个专业的 JavaScript 测试工具，能够轻松测试 React 组件以及 Render Props。
本文简单介绍了如何使用 Enzyme 测试 React 组件中的 Render Props。希望这篇文章对大家有所帮助。如果有什么疑问或者建议，欢迎在下面留言。
示例代码
- Counter.js:
------ ----- ---- --------
----- ------- ------- --------------- -
----- - -
------ --
--
-------------- - -- -- -
------------------------- -- -- ------ --------------- - - ----
--
-------- -
------ -
-----
------------------------------------ ---------------------
------
--
-
-
------ ------- --------- App.js:
------ ------- ---- -----------------------
-------- ----- -
------ -
---- ----------------
--------
--------------- --------------- -- -
-----
---------- ------------
------- ------------------------------------
------
--
--
------
--
-
------ ------- ----- Counter.test.js:
------ ------- ---- --------------------------
------ ------- - ------- - ---- ---------
------ ----- ---- --------
------ ------- ---- ------------
------------------ -------- --- --------- ---
------------- ------- ------- ----------- -- -- -
----- ------- - --------
--------
--------------- --------------- -- -
-----
----- --------------------------------
------- ------------------------------------------
------
--
--
--
---------------------------------------------------
-----------------------------------------
---------------------------------------------------
---来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671e3cea2e7021665ef704b6