如何在React中测试上下文？

npm install --save-dev @testing-library/react

import React, { createContext, useContext } from 'react';

// 创建上下文
const MyContext = createContext();

// 使用上下文的组件
const MyComponent = () => {
  const contextValue = useContext(MyContext);

  return (
    <div>
      <p>上下文值：{contextValue}</p>
    </div>
  );
};

export default MyComponent;

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

// 使用jest.mock模拟上下文
jest.mock('./MyContext', () => ({
  __esModule: true,
  default: {
    Provider: ({ children }) => <div>{children}</div>,
    Consumer: ({ children }) => children('测试上下文值'),
  },
}));

test('测试上下文', () => {
  const { getByText } = render(<MyComponent />);
  const contextValueElement = getByText('上下文值：测试上下文值');
  expect(contextValueElement).toBeInTheDocument();
});