Jest 测试中的 React HOC
React 高阶组件 (Higher-Order Components，HOC) 是一种常用的代码复用方式，它提供了一种可以增强 React 组件的能力，让我们可以将一些公共逻辑抽离出来，减少代码冗余量。在使用 HOC 的过程中，需要注意一些细节以及测试问题，后文将着重介绍 Jest 测试中的 React HOC。
HOC 概述
React HOC 是一个函数，它接受一个组件参数并返回一个新的组件。这个新的组件拥有被增强的能力，例如注入一些 props 或者通过一个逻辑封装的组件。
比如，我们可以使用一个 HOC 来封装一个组件使其具有被禁用的能力：
const withDisable = Component => props => (
<Component {...props} disabled />
);
const MyComponent = () => <button>Click me!</button>;
const DisabledMyComponent = withDisable(MyComponent);在上述代码中，withDisable 是一个 HOC，它接受一个组件 MyComponent，并通过属性 disabled 注入一个禁用状态，最后返回一个新的组件 DisabledMyComponent。
Jest 测试中的 React HOC
在使用 HOC 的过程中，我们经常需要测试它的功能是否正常。这里介绍一些使用 Jest 测试 HOC 的技巧。
测试 HOC 是否成功注入 props
首先，我们需要测试一个 HOC 能否成功的向组件注入 props。例如下面这个例子：
-- -------------------- ---- -------
--------------------- ----- -- -- -
---------- ------ --- ------- ---- ---- ------ -- -- -
----- -------- - -- -- ---- ---
----- ---------------- - ----------------------
----- ------- - ----------------------- ----
-----------------------------------------------------------
---
---在这个例子中，我们定义了一个 TestComp 组件，然后使用 withDisable HOC 将它包装成一个新的组件 DisabledTestComp，并渲染它。最后检查被注入的属性 disabled 是否为 true。
测试 HOC 是否成功嵌套
如果 HOC 带有嵌套能力，那么我们就需要测试嵌套之后是否生效。例如下面这个例子：
-- -------------------- ---- -------
----- --------- - ----- -- --------- -- ----- -- -
-----
----------------
---------- ---------- --
------
--
------------------- ----- -- -- -
---------- ------ --- ----- ---- ---- ------- ------- -- -- -
----- -------- - -- -- ---- ---
----- ------------- - --------------- ------------------
----- ------- - -------------------- ----
-------------------------------------------- --------
---
---在上面的例子中，我们定义了一个带有嵌套能力的 HOC，它接受一个参数 title 并返回一个新的 HOC。然后我们测试这个 HOC 是否成功注入了一个标题。
测试 HOC 是否接受原组件的 props
除了注入属性之外，HOC 还需要能够接受原组件的属性。例如下面这个例子：
-- -------------------- ---- -------
----- --------- - --------- -- -
----- --------- ------- --------------- -
----- - -
------ --
--
----------------- - -- -- -
----------------------- -- -- ------ --------------- - - ----
--
-------- -
------ -
----------
------------------------
--------------------------------------
---------------
--
--
-
-
------ ----------
--
------------------- ----- -- -- -
---------- ------ --- ----- ---- ---- ------- ------- -- -- -
----- -------- - -- ----- -- -- -------------------
----- ------------- - --------------------
----- ------- - -------------------- ----
-----------------------------------------------------
-----------------------------------------------
-----------------------------------------------------
---
---在这个例子中，我们定义了一个带有状态的 HOC，它接受一个组件并返回一个能够注入状态及方法的新组件 WithCount。最后我们测试这个 HOC 是否成功注入了状态。
总结
通过上述测试例子，我们可以学到测试带有 HOC 的 React 组件的方法。在实际项目中，我们可以结合开发实践与测试覆盖率去设计和测试 HOC，这将极大地提高项目的质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e9a9948841e9894b20599