如何修改React Context API的Mock对象并运行Jest测试用例

问题原因 #

你用jest.mock全局Mock了useCardContext，这个Mock会在模块加载阶段就生效并被缓存。后续用jest.doMock时，因为组件已经被导入过（模块缓存机制），不会重新读取新的Mock配置，导致cardInfo始终是初始的true。

推荐解决方案：用可动态修改的Mock函数 #

不要固定Mock的返回值，而是把useCardContext设为Jest Mock函数，再在每个测试用例里单独设置返回值，步骤如下：

1. 全局Mock时仅定义空Mock函数：

jest.mock('../context', () => {
  const original = jest.requireActual('../context');
  return {
    ...original,
    // 将useCardContext设为一个空的Mock函数
    useCardContext: jest.fn()
  };
});

2. 在各测试用例中设置对应返回值：

// 先导入所需模块和Mock函数
import { useCardContext } from '../context';
import CardComponent from './CardComponent';

it('测试cardInfo为true的场景', () => {
  // 给当前测试设置Mock返回值
  useCardContext.mockReturnValue({
    state: { cardInfo: true },
    dispatch: jest.fn() // 替换成你自己的dispatchMock即可
  });

  render(<CardComponent />);
  // 此处编写你的断言逻辑
});

it('测试cardInfo为false的场景', () => {
  // 重置Mock（可选，避免和其他测试的返回值冲突）
  useCardContext.mockReset();
  
  // 给当前测试设置Mock返回值
  useCardContext.mockReturnValue({
    state: { cardInfo: false },
    dispatch: jest.fn()
  });

  render(<CardComponent />);
  // 此处编写你的断言逻辑
});

备选方案：用jest.doMock配合动态导入（繁琐但可行） #

如果一定要用jest.doMock，需要先清除模块缓存，再动态导入组件，确保读取新的Mock配置：

it('card info to false', async () => {
  // 重置所有模块缓存
  jest.resetModules();

  // 重新Mock上下文
  jest.doMock('../context', () => {
    const original = jest.requireActual('../context');
    return {
      ...original,
      useCardContext: () => ({ state: { cardInfo: false }, dispatch: jest.fn() })
    };
  });

  // 必须在doMock之后动态导入组件
  const CardComponent = (await import('./CardComponent')).default;

  render(<CardComponent />);
  // 此处编写你的断言逻辑
});

注意事项 #

• 优先选择第一种方案，代码简洁易维护，无需处理模块缓存问题。
• 使用Mock函数时，建议在测试前后用mockReset()或mockClear()清除Mock的调用记录和返回值，避免测试用例间互相干扰。

内容的提问来源于stack exchange，提问作者Kesavan Subramaniam Che