当我们在写 React 组件时，有时候需要使用到 React 的上下文，尤其是在很多的库中，一些重要的配置信息都是通过上下文的方式来传递的。在实际开发中，我们需要对这些组件进行测试，如果这些上下文没有被正确传递，那么就会导致组件无法工作。但是，在测试的过程中 mock 掉一个上下文也是很常见的需求，那么这篇文章就将介绍在 Jest 测试 React 组件时如何 mock 掉一个上下文。
上下文
首先，让我们来了解一下 React 的上下文。上下文（context）是 React 提供的一种组件通信方式，让父组件可以将数据或功能传递给其所有子孙组件，避免了多层级传递 props 的代码冗余。使用上下文的方式可以让我们编写出更加简单、清晰的 React 代码。
在 React 中，我们可以使用 React.createContext 来创建一个上下文对象，并将其包裹在顶层组件中，这样在任何一个子组件中，只要引用了这个上下文对象，就可以通过 props 属性进行访问，即 this.props.context。如果上下文是个对象，则可以直接进行方法和属性的调用，而不需要通过其他组件来传递。
Jest 测试
在进行 React 组件测试时，我们通常会使用 Jest 来进行单元测试。那么在测试过程中 mock 掉一个上下文是常见的需求，我们可以使用 Jest 提供的 jest.mock 函数来实现。具体的实现思路如下：
- 在测试文件中，导入需要测试的组件；
- 使用
jest.mock函数来 mock 掉需要使用的上下文； - 进行测试，判断组件的输出是否正确。
下面通过一个示例来说明如何实现：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ ---------------- ---- ---------------------
-- -- --------- -- ---- - -------------
---------------------------- -- -- --
-------------- -
--------- -- -------- -- -- ----------
---- ----- -----
---- ----- -----
---
--
----
------------- --------- ---- ------ --------- -- -- -
----- - ----------- - - ------------------------ ----
----- ------ - ----------------------
------------------------------------- --- --- ---- ------
---在上面的示例中，我们进行了如下的操作：
- 导入需要测试的组件
ContextComponent； - 使用
jest.mock函数模拟SampleContext的Consumer，并将其中的返回结果设为两个 mock 数据mock foo和mock bar； - 自行编写测试用例，验证组件输出是否正确。
可以看到，通过上述的方式，我们可以很方便地模拟一个上下文对象，并在测试中验证组件的输出是否正确。
总结
在本文中，我们介绍了在 Jest 测试 React 组件时如何 mock 掉一个上下文。通过使用 jest.mock 函数，我们可以方便地模拟上下文对象，并在测试中验证组件的输出是否正确。实际应用中，我们可以根据具体的业务需求进行相应的修改，从而更好地应用到我们的开发过程中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451d6f3675af4061b595a4f