React Context 是 React 中一种非常有用的功能，它可以让你在组件树中嵌套深度很深的子组件中进行状态共享。但是，在测试时我们可能遇到了一些问题，因为 Enzyme 不支持访问 React Context。在本文中，我们将介绍如何在 Enzyme 测试中模拟 React Context。
什么是 React Context？
在 React 中进行组件通信是一件非常常见的事情，通常需要使用 props 向下传递数据。但是，当应用程序变得越来越复杂时，你可能需要在组件树中跨越许多层级传递相同的数据。这时使用 React Context 就可以解决这个问题。它可以让你在组件树中嵌套深度很深的子组件中进行状态共享，而无需显式地将 props 传递下去。
如何模拟 React Context？
为了在 Enzyme 测试中模拟 React Context，我们需要使用 React 的 createContext API 来创建一个 Context，并将其作为父组件的属性传递给子组件。
示例代码：
-- -------------------- ---- -------
-- ------- --
------ ----- --------- - ----------------------
-- ---
----- --------------- ------- --------------- -
-------- -
------ -
------------------- -------- ---- ------- ---
--------------- --
---------------------
--
-
-
-- ---
----- -------------- ------- --------------- -
-------- -
------ -
--------------------
---------- -- -------------------------
---------------------
--
-
-上面的代码中，我们创建了一个名为 MyContext 的 Context，并将其添加到了 ParentComponent 组件上。在 ParentComponent 中，我们将 MyContext.Provider 的 value 属性设置为一个包含 key 属性的对象。然后，在 ChildComponent 中，我们使用 MyContext.Consumer 来消费这个 Context，并将 key 属性展示出来。
在 Enzyme 中测试这段代码时，我们想要测试子组件中展示的 key 属性是否与预期相符。为了实现这个测试，我们需要模拟 MyContext。我们可以使用 jest.mock API 来模拟 MyContext，并将 value 属性设置为与我们预期的值相同。
示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ------------
-------------------------- -- -- -
---------- ------- --- ------- ----- ---- --------- -- -- -
----------------- -------------------------------------- -- -
------ - --------- ------- -- --------------- --------- -- -- ----- -------------- - ---- ------- - --
---
----- ------- - ----------------------- ----
----------------------------------------------------
---
---在测试代码中，我们使用 jest.spyOn API 来模拟 React.createContext 方法，并返回一个具有与预期值相同的 _currentValue 属性的对象。然后，我们在 Enzyme 的 shallow 方法中渲染 ChildComponent，并断言子组件中展示的文本是否与我们预期的值相同。如果测试通过，则说明我们已经成功模拟了 MyContext。
结论
在本文中，我们介绍了如何使用 Enzyme 模拟 React Context，以便在测试中使用。通过使用 React.createContext 创建 Context，并将其作为属性传递给子组件，我们可以在测试中轻松地访问和控制 Context。希望本文可以帮助你更好地掌握 Enzyme 测试和 React Context 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f29b3ca44b36ee5766904a