基于异步API结果渲染的子组件Enzyme测试方法咨询

这个问题我之前也碰到过——React的setState异步特性加上API请求的异步，确实会让Enzyme测试时子组件迟迟不出现。下面是几个靠谱的解决方法，按推荐程度排序：

方法一：async/await + Enzyme update()（最简洁） #

核心思路是：先Mock API请求返回模拟数据，挂载组件后等待异步操作完成，再手动更新Enzyme的wrapper来同步最新状态，最后断言子组件存在。

假设你的父组件代码大概是这样：

class ParentComponent extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

  render() {
    if (!this.state.data) return null;
    return (
      <div>
        {this.state.data.items.map(item => <ChildComponent key={item.id} item={item} />)}
      </div>
    );
  }
}

对应的测试代码：

import { mount } from 'enzyme';
import ParentComponent from './ParentComponent';

// 全局Mock fetch API，避免调用真实接口
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ items: [{ id: 1, name: 'Test Item' }] })
  })
);

describe('ParentComponent', () => {
  it('成功渲染子组件当API请求完成后', async () => {
    const wrapper = mount(<ParentComponent />);
    
    // 等待React处理完setState的异步队列
    await Promise.resolve();
    // 更新Enzyme的wrapper，同步最新的组件状态
    wrapper.update();
    
    // 断言子组件存在，数量符合预期
    expect(wrapper.find('ChildComponent')).toHaveLength(1);
  });
});

方法二：配合React act() 确保渲染一致性 #

React的act()函数会强制组件完成所有渲染更新和副作用，让测试行为更贴近真实浏览器环境，适合复杂的异步场景。

测试代码示例：

import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import ParentComponent from './ParentComponent';

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ items: [{ id: 1, name: 'Test Item' }] })
  })
);

describe('ParentComponent', () => {
  it('API请求完成后渲染子组件', async () => {
    let wrapper;
    
    // 用act包裹所有会触发组件更新的异步操作
    await act(async () => {
      wrapper = mount(<ParentComponent />);
      // 等待API请求和setState完成
      await Promise.resolve();
    });
    
    wrapper.update();
    expect(wrapper.find('ChildComponent')).toHaveLength(1);
  });
});

方法三：setImmediate 兼容旧环境（不推荐但可用） #

如果你的测试环境不支持async/await，可以用setImmediate来等待异步队列执行完毕，配合Jest的done回调标记测试结束：

import { mount } from 'enzyme';
import ParentComponent from './ParentComponent';

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ items: [{ id: 1, name: 'Test Item' }] })
  })
);

describe('ParentComponent', () => {
  it('渲染子组件当API返回数据后', done => {
    const wrapper = mount(<ParentComponent />);
    
    setImmediate(() => {
      wrapper.update();
      expect(wrapper.find('ChildComponent')).toHaveLength(1);
      done(); // 告诉Jest测试已完成
    });
  });
});

关键注意事项 #

• 必须Mock API请求：永远不要在单元测试中调用真实API，否则测试会依赖外部服务，变得不稳定且缓慢。
• 理解setState的异步性：即使API请求同步返回数据，React也会批量处理setState，不会立即更新组件状态，必须等待React的更新周期完成。
• Enzyme update() 是必须的：Enzyme的wrapper不会自动同步组件的最新状态，需要手动调用update()来触发重新渲染。

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