无法对Context Provider进行单元测试？渲染仅输出空div

问题分析 #

你的测试出现空<div/>的核心原因有两个：

1. jest.mock放在测试用例(it)内部无效——jest的模块mock在模块加载阶段生效，放在用例里时，MyApp已经导入并加载了真实的SomeContext。
2. 手动用await act包裹render完全多余，React Testing Library的render已自动处理React异步更新和act调用。

修正方案 #

1. 正确配置jest.mock（放在文件最顶部） #

把mock代码移到测试文件最开头，确保在导入MyApp之前执行。根据你的SomeContext结构，直接mock成传递children的组件即可（如果子组件不需要上下文值）：

// 必须在所有导入之前执行mock
jest.mock('my-external-library', () => ({
  SomeContext: ({ children }) => <>{children}</>
}));

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

2. 简化测试用例代码 #

移除多余的await act，直接使用RTL的render：

it('Should render', () => {
  const { debug, getByText } = render(
    <MyApp>
      <h1>Hello World</h1>
    </MyApp>
  );

  debug();
  // 断言内容存在
  expect(getByText('Hello World')).toBeInTheDocument();
});

3. 如果子组件需要上下文值 #

若子组件依赖SomeContext提供的数据，可以模拟完整的Provider结构：

import React from 'react';

jest.mock('my-external-library', () => {
  // 创建模拟的Context
  const MockContext = React.createContext({
    // 填入子组件需要的模拟数据
    user: { id: 1, name: 'Test User' }
  });

  return {
    SomeContext: ({ children }) => (
      <MockContext.Provider value={{ /* 填入模拟的上下文值 */ }}>
        {children}
      </MockContext.Provider>
    )
  };
});

关键注意事项 #

• mock时机优先：jest.mock必须在目标模块导入前执行，否则会使用真实的库代码。
• 避免冗余act：RTL的render、fireEvent等API已内置act处理，无需手动包裹。
• 组件mock要正确：确保mock的SomeContext组件正确传递children，否则子内容无法渲染。

内容的提问来源于stack exchange，提问作者physicsboy