如何用Jest测试基于react-lazy-load-image-component的懒加载组件

报错原因 #

该报错是因为Jest默认的jsdom运行环境未实现IntersectionObserver API，而react-lazy-load-image-component的懒加载逻辑完全依赖这个API，因此组件初始化阶段就会抛出类型错误。

解决方案 #

方案1：全局模拟IntersectionObserver（适合需要测试懒加载行为的场景）

在Jest全局初始化文件（通常为src/setupTests.ts或jest.setup.js，即你配置中setupFilesAfterEnv指向的文件）中添加全局模拟逻辑：

global.IntersectionObserver = class IntersectionObserver {
  constructor(callback: IntersectionObserverCallback) {
    this.callback = callback;
  }
  callback: IntersectionObserverCallback;
  observe(target: Element) {
    // 直接标记元素进入视口，触发懒加载渲染
    this.callback([{ isIntersecting: true, target } as IntersectionObserverEntry], this);
  }
  unobserve() {}
  disconnect() {}
};

配置完成后原有测试代码无需修改即可正常运行，懒加载组件会在渲染时直接加载子内容。

方案2：Mock懒加载组件（适合仅验证业务逻辑的单元测试场景）

如果你的测试不需要验证懒加载本身的行为，可以直接在测试文件顶部Mock整个react-lazy-load-image-component库，跳过懒加载逻辑：

jest.mock('react-lazy-load-image-component', () => ({
  LazyLoadComponent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
  // 如果用到该库的其他组件也可同步添加mock
  LazyLoadImage: (props: any) => <img {...props} />,
}));

该方案无需修改全局配置，性能更高，适配纯业务逻辑的测试场景。

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