如何在React Testing Library中测试使用react-lazyload的组件

react-lazyload 本质是通过判断元素是否进入视口、监听滚动事件来触发实际内容渲染，单元测试的jsdom环境下，默认渲染的元素不在视口范围内，因此不会触发加载逻辑，单纯调用waitFor不会生效。

方案1：Mock react-lazyload 组件（最推荐，业务测试通用） #

如果你的测试目标是验证自身业务组件逻辑，而非测试react-lazyload库本身的懒加载能力，直接mock组件跳过懒加载逻辑即可，实现最简单高效：

// 测试文件顶部直接mock懒加载组件
jest.mock('react-lazyload', () => {
  return function MockLazyLoad({ children }) {
    // 直接渲染子元素，跳过懒加载判断逻辑
    return <>{children}</>;
  };
});

test('懒加载内容正常渲染', () => {
  render(<WrapperComponent />);
  // 不需要waitFor，直接即可查询到目标内容
  expect(screen.getByText('Lazily loaded text!')).toBeInTheDocument();
});

方案2：手动触发懒加载检查（需验证懒加载逻辑时使用） #

如果你需要测试懒加载触发前后的状态变化（比如占位符是否先出现，加载后是否正常替换），可以调用react-lazyload暴露的forceCheck方法主动触发所有懒加载组件的可见性检查：

import { forceCheck } from 'react-lazyload';

test('触发懒加载后内容正常渲染', async () => {
  render(<WrapperComponent />);
  // 先验证占位符正常显示
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  // 手动触发所有懒加载组件的可见性检查
  forceCheck();
  await waitFor(() => {
    expect(screen.getByText('Lazily loaded text!')).toBeInTheDocument();
  });
});

方案3：兼容IntersectionObserver模式 #

如果你使用的是新版本react-lazyload，且配置了基于IntersectionObserver实现懒加载，需要先mock全局的IntersectionObserver，模拟元素进入视口的回调：

// 测试文件顶部全局mock
beforeAll(() => {
  global.IntersectionObserver = class IntersectionObserver {
    constructor(callback) {
      this.callback = callback;
    }
    observe(element) {
      // 直接返回元素处于可见状态的回调
      this.callback([{ isIntersecting: true, target: element }]);
    }
    unobserve() {}
    disconnect() {}
  };
});

test('IntersectionObserver模式下懒加载正常触发', async () => {
  render(<WrapperComponent />);
  await waitFor(() => {
    expect(screen.getByText('Lazily loaded text!')).toBeInTheDocument();
  });
});

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