如何在React Testing Library中模拟图片并设置图片属性？

针对你遇到的React Testing Library中图片onload触发后无法获取clientWidth/actualWidth属性，导致Overlay组件不渲染的问题，这里有两个直接可行的解决办法：

方法1：手动设置DOM元素的宽高属性 #

在测试环境的JSDOM中，DOM元素的clientWidth、actualWidth等属性是可修改的。你可以在触发load事件前，直接给获取到的img元素赋值这些属性：

import { render, fireEvent, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

test('图片加载后Overlay正常渲染', () => {
  render(<YourComponent />);
  const img = screen.getByRole('img');

  // 手动设置图片的实际宽高
  img.actualWidth = 600;
  img.clientWidth = 600;

  // 触发图片的load事件
  fireEvent.load(img);

  // 断言Overlay已渲染（假设Overlay有testid="overlay"）
  expect(screen.getByTestId('overlay')).toBeInTheDocument();
});

方法2：全局模拟Image构造函数 #

如果你的组件逻辑中涉及new Image()创建图片实例，或者需要全局统一模拟图片行为，可以重写global.Image，让它的实例自带宽高属性并自动触发onload：

import { render, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

beforeAll(() => {
  // 保存原始Image构造函数，测试后恢复
  global.OriginalImage = global.Image;

  // 自定义模拟Image
  global.Image = jest.fn(() => ({
    src: '',
    actualWidth: 500,
    clientWidth: 500,
    onload: null,
    // 监听load事件时自动触发回调
    addEventListener: (event, callback) => {
      if (event === 'load') {
        setTimeout(callback, 0); // 异步触发，贴近真实浏览器行为
      }
    }
  }));
});

afterAll(() => {
  // 恢复原始Image构造函数
  global.Image = global.OriginalImage;
});

test('全局模拟图片后Overlay正常渲染', () => {
  render(<YourComponent />);
  // 模拟的Image会自动触发onload，无需手动调用fireEvent
  expect(screen.getByTestId('overlay')).toBeInTheDocument();
});

额外注意事项 #

• 确保你的imgRef正确绑定到了img元素，测试时可以通过screen.getByRole('img')或screen.getByTestId('your-img-testid')获取对应的DOM元素。
• 如果你的Overlay组件是基于imgWidth是否存在来控制渲染，设置完宽高属性并触发load后，imgWidth会被更新，Overlay就会正常渲染。

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