如何使用Enzyme测试基于react-loadable动态导入的React组件

我之前在测试用react-loadable封装的组件时也踩过类似的坑，用Enzyme直接挂载的话，经常只能抓到加载中的状态，没法测试实际要渲染的内部组件。下面分享两种亲测有效的解决思路：

方法1：Mock react-loadable 同步加载组件 #

这种方法适合单元测试，直接跳过异步加载的过程，让react-loadable同步返回目标组件，这样我们可以直接测试内部组件的渲染逻辑。

具体代码示例：

import React from 'react';
import { mount } from 'enzyme';
import Loadable from 'react-loadable';
import InnerComponent from 'path/to/innerComponent';
import OuterLoadableComponent from './your-outer-component-path';

// 替换react-loadable的默认实现，让它直接执行loader函数返回组件
jest.mock('react-loadable', () => ({
  default: (options) => options.loader()
}));

describe('OuterLoadableComponent', () => {
  it('应该正确渲染InnerComponent', () => {
    const wrapper = mount(<OuterLoadableComponent />);
    // 断言目标组件已被渲染
    expect(wrapper.find(InnerComponent)).toHaveLength(1);
  });
});

方法2：等待异步加载完成后再断言 #

如果你需要测试加载状态到完成状态的过渡逻辑，可以用这种方法，等待组件异步加载完成后再更新Enzyme的wrapper并断言。

代码示例：

import React from 'react';
import { mount } from 'enzyme';
import OuterLoadableComponent from './your-outer-component-path';
import InnerComponent from 'path/to/innerComponent';
import LoaderComponent from 'path/to/LoaderComponent';

describe('OuterLoadableComponent', () => {
  it('初始显示加载组件，加载完成后显示InnerComponent', async () => {
    const wrapper = mount(<OuterLoadableComponent />);
    
    // 初始状态：断言加载组件存在
    expect(wrapper.find(LoaderComponent)).toHaveLength(1);
    
    // 等待异步加载完成（用setImmediate模拟异步等待）
    await new Promise(resolve => setImmediate(resolve));
    // 强制更新wrapper，让Enzyme捕获组件的更新
    wrapper.update();
    
    // 加载完成后：断言加载组件消失，目标组件出现
    expect(wrapper.find(LoaderComponent)).toHaveLength(0);
    expect(wrapper.find(InnerComponent)).toHaveLength(1);
  });
});

小提示 #

• 如果你的LoaderComponent是第三方组件或者不需要测试它的细节，也可以用jest.mock来mock这个加载组件，避免不必要的依赖问题。
• 第一种方法更高效，适合快速验证内部组件的逻辑；第二种方法更贴近真实场景，适合测试组件的完整生命周期。

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