如何用Jest/react-testing-library测试依赖Context的React组件？

问题原因 #

你测试代码里用的AuthProvider.Provider是错误写法——AuthProvider是你自定义的封装组件，它本身并没有Provider属性，真正需要用来传递上下文的是你通过React.createContext创建的AuthContext.Provider。

可行解决方案 #

方案1：直接使用AuthContext.Provider包裹测试组件 #

直接用创建好的AuthContext.Provider传递模拟的上下文值，这是最直接的方式：

// 定义模拟的上下文值，需包含组件用到的AllUserInfo和setAllUserInfo
const userMock = {
  AllUserInfo: { id: 1, username: 'test_user' },
  setAllUserInfo: jest.fn() // 用jest模拟setter函数（如果组件会调用它的话）
};

const { queryByTestId } = render(
  <AuthContext.Provider value={userMock}>
    <ContactUs />
  </AuthContext.Provider>
);

方案2：改造AuthProvider，支持传入初始值 #

如果你希望测试时更贴近真实项目的组件嵌套结构，可以修改AuthProvider，让它接受一个initialUserInfo参数来初始化状态：

修改AuthContext组件代码：

export const AuthProvider = ({ children, initialUserInfo = null }) => {
  const [AllUserInfo, setAllUserInfo] = useState(initialUserInfo);
  return (
    <AuthContext.Provider value={{ AllUserInfo, setAllUserInfo }}>
      {children}
    </AuthContext.Provider>
  );
};

测试时直接使用改造后的AuthProvider：

const userMock = { id: 1, username: 'test_user' };

const { queryByTestId } = render(
  <AuthProvider initialUserInfo={userMock}>
    <ContactUs />
  </AuthProvider>
);

方案3：使用测试Wrapper复用上下文配置 #

如果多个测试用例都需要用到相同的上下文配置，可以创建一个测试专用的Wrapper组件，避免重复代码：

// 定义测试Wrapper
const AuthTestWrapper = ({ children, userInfo }) => {
  return (
    <AuthContext.Provider 
      value={{ 
        AllUserInfo: userInfo, 
        setAllUserInfo: jest.fn() 
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

// 测试时使用wrapper选项
const { queryByTestId } = render(<ContactUs />, {
  wrapper: ({ children }) => <AuthTestWrapper userInfo={userMock}>{children}</AuthTestWrapper>
});

内容的提问来源于stack exchange，提问作者yassine-eluharani