在 React 应用程序中，Context 是一种允许您在组件之间共享数据的方法。它允许您跨越组件树传递数据，而不必手动将 prop 从一个组件传递到另一个组件。然而，测试 React 组件时，有时需要 mock 掉 Context，以便测试受到正确的数据影响。在本文中，我们将介绍如何在 Jest 测试中 mock React Context。
什么是 Context？
在介绍如何 mock Context 之前，我们先来简单介绍一下 Context 是什么。Context 是 React 提供的一种允许您共享数据的方法。通过 Context，您可以在组件之间传递数据，而无需在组件树中手动传递 props。
Context 由两部分组成：Provider 和 Consumer。Provider 组件用于向子组件传递数据，Consumer 组件用于接收 Provider 组件传递的数据。下面是一个简单的例子：
-- -------------------- ---- -------
------ ------ - ------------- - ---- --------
----- --------- - ------------------
----- ------ - -- -- -
------ -
------------------- -------- ----- ----- ---
------ --
---------------------
--
--
----- ----- - -- -- -
------ -
--------------------
--- ---- -- -- ---------- --------------
---------------------
--
--在这个例子中，我们创建了一个名为 “MyContext” 的 Context，并使用它向子组件传递了一个对象 {name: 'Tom'}。子组件在 Consumer 组件中接收到了这个数据，并展示了一个问候语：Hello Tom!。
Jest 中如何 mock Context？
现在我们已经了解了 Context 是什么，让我们来看看如何在 Jest 测试中 mock 掉 Context。
假设我们有一个使用 Context 的组件，叫做 MyComponent：
-- -------------------- ---- ------- ------ ------ - ---------- - ---- -------- ------ --------- ---- -------------- ----- ----------- - -- -- - ----- - ---- - - ---------------------- ------ ---------- -------------- -- ------ ------- ------------
我们想要测试这个组件是否正确地显示来自 Context 的数据。为了实现这个测试，我们需要 mock 掉 Context，并将正确的数据传递给组件。为此，我们可以使用 Jest 提供的 mock 实现。
首先，我们需要为 Context 创建一个 mock，这可以通过使用函数“jest.mock()”来实现：
import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
jest.mock('./MyContext', () => ({
__esModule: true,
default: { name: 'Tom' },
}));在这个例子中，我们使用了 Jest 的“mock”函数来 mock 掉 MyContext。我们将 MyContext 替换为一个对象，该对象包含一个“name”属性，它的值为“Tom”。
然后，我们渲染 MyComponent 并检查它是否正确地显示了“Hello Tom!”。这可以使用 Jest 的“expect”函数来实现：
test('MyComponent should render correctly with context', () => {
const { getByText } = render(<MyComponent />);
expect(getByText('Hello Tom!')).toBeInTheDocument();
});这个测试用例会验证组件是否正确地显示了“Hello Tom!”这个文本。
结论
在 Jest 测试中 mock 掉 Context 可以帮助我们准确地测试组件，以便确保它们得到了所需的数据。在本文中，我们介绍了如何使用 Jest 的 mock 实现来 mock 掉 React Context。通过这种方法，我们可以简化测试，以确保代码的正确性和稳定性。
示例代码
-- -------------------- ---- ------- -- -------------- ------ ------ - ---------- - ---- -------- ------ --------- ---- -------------- ----- ----------- - -- -- - ----- - ---- - - ---------------------- ------ ---------- -------------- -- ------ ------- ------------
-- -------------------- ---- ------- -- ------------------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ ----------- ---- ---------------- ------------------------ -- -- -- ----------- ----- -------- - ----- ----- -- ---- ----------------- ------ ------ --------- ---- --------- -- -- - ----- - --------- - - ------------------- ---- ----------------------- ---------------------------- ---
// MyContext.js
import React from 'react';
const MyContext = React.createContext({});
export default MyContext;来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671ca1d39babaf620fb1a9d9