React js - 测试组件时如何模拟上下文

Javascript
// 创建上下文对象
const MyContext = React.createContext();
// 创建一个使用上下文的组件
const MyComponent = () => {
  // 使用上下文
  const { data } = React.useContext(MyContext);
  
  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
};
// 在测试中模拟上下文
test('MyComponent displays correct data', () => {
  // 创建一个模拟上下文对象
  const context = {
    data: 'Hello World'
  };
  
  // 使用模拟上下文对象包裹被测试组件
  render(
    <MyContext.Provider value={context}>
      <MyComponent />
    </MyContext.Provider>
  );
  
  // 断言组件是否显示了正确的数据
  expect(screen.getByText(/Hello World/i)).toBeInTheDocument();
});