React组件useEffect内Fetch数据测试渲染异常求助

你的问题核心在于：测试代码是同步执行的，而useEffect中的fetchData是异步操作，测试在异步请求完成、state更新前就执行了元素查找；同时Enzyme不会自动跟踪组件的异步更新，需要手动触发渲染同步。

解决步骤 #

1. Mock 异步函数fetchData

测试中不应依赖真实API请求，用Jest mock该函数以返回预设数据：

// 在测试文件顶部，替换为实际的fetchData模块路径
jest.mock('../utils/fetchData', () => ({
  fetchData: jest.fn().mockResolvedValue([1, 2, 3, ..., 20])
}));

2. 调整测试逻辑，等待异步操作并同步组件渲染

将组件挂载放在beforeEach中保证测试隔离，同时等待异步Promise完成后手动更新组件：

describe('My Component Test Suite', () => {
  let component;

  beforeEach(() => {
    jest.clearAllMocks(); // 重置mock，避免测试间污染
    component = mount(<MyComponent />);
  });

  it('should render the data', async () => {
    // 等待异步Promise执行完成，state更新
    await Promise.resolve();
    // 手动更新组件，让Enzyme捕获state变化后的渲染
    component.update();
    
    const dataElement = component.find("#the-data-1").first();
    expect(dataElement.exists()).toBe(true);
    expect(dataElement.text()).toBe('1');
  });
});

如果不使用async/await，也可以用回调式的异步处理：

it('should render the data', (done) => {
  setImmediate(() => {
    component.update();
    const dataElement = component.find("#the-data-1").first();
    expect(dataElement.exists()).toBe(true);
    done();
  });
});

关键说明 #

• Enzyme的mount实例不会自动跟踪组件的异步更新，必须调用component.update()同步渲染状态。
• 测试代码默认同步执行，必须等待fetchData的Promise完成后再执行断言，否则会拿到首次渲染的空数组状态。
• 将组件挂载放在beforeEach中，确保每个测试用例都使用干净的组件实例，避免测试间的状态污染。

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