在 React 应用中，context 是一种在组件之间共享数据的方式。当我们测试一个使用了 context 的组件时，需要模拟 context 的值以确保测试的准确性。本文将介绍如何使用 Jest 测试 React 组件时模拟 context。
什么是 context？
在 React 组件树中，context 是一种在组件之间共享数据的方式。它允许我们将数据传递给组件树中的任何组件，而不必手动地将这些数据通过 props 一层层地传递下去。
如何使用 context？
在 React 中，我们可以使用 createContext 函数创建一个 context 对象。该函数接受一个默认值作为参数，并返回一个包含 Provider 和 Consumer 组件的对象。
const MyContext = React.createContext(defaultValue);
在组件中，我们可以使用 Provider 组件将值传递给 context：
<MyContext.Provider value={/* some value */}> {/* child components */} </MyContext.Provider>
在任何 Consumer 组件中，我们可以使用 useContext 钩子获取 context 值：
const value = useContext(MyContext);
Jest 如何模拟 context？
当我们测试使用了 context 的组件时，我们需要模拟 context 的值以确保测试的准确性。Jest 提供了一个 mock 实现来模拟 context 对象。
const mockContext = { /* mocked context values */ }; jest.mock("./path/to/context", () => ({ Consumer: ({ children }) => children(mockContext) }));
在测试中，我们可以通过创建一个包含 Provider 组件的父组件来传递 context 值：
const wrapper = mount( <MyContext.Provider value={mockContext}> <MyComponent /> </MyContext.Provider> );
在组件中，我们可以使用 useContext 钩子获取 context 值：
const value = useContext(MyContext);
示例代码
下面是一个使用了 context 的组件的示例代码：
-- -------------------- ---- ------- ------ ------ - ---------- - ---- -------- ------ --------- ---- -------------------- ----- ----------- - -- -- - ----- ----- - ---------------------- ------ ------------------- -- ------ ------- ------------展开代码
下面是一个测试使用了 context 的组件的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ----------- ---- ---------------- ------ --------- ---- -------------------- ----- ----------- - - -- ------ ------- ------ -- -- ------------------------------ -- -- -- --------- -- -------- -- -- --------------------- ---- ----------------------- -- -- - ---------- ------ ---- ------- ------- -- -- - ----- ------- - ------ ------------------- -------------------- ------------ -- --------------------- -- -------------------------------------------- --- ---展开代码
总结
在测试使用了 context 的组件时，我们需要模拟 context 的值以确保测试的准确性。Jest 提供了一个 mock 实现来模拟 context 对象。我们可以使用 createContext 函数创建一个 context 对象，并使用 Provider 组件将值传递给 context。在测试中，我们可以通过创建一个包含 Provider 组件的父组件来传递 context 值。在组件中，我们可以使用 useContext 钩子获取 context 值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6566a05dd2f5e1655df9cd9b
