如何使用Jest/Enzyme测试组件内img标签的onError事件逻辑

DevOps 小满

2026-9-23

测试img标签onError降级逻辑的实现方案

假设你已经完成Jest+Enzyme的测试环境配置，以下是具体测试步骤：

1. 前置准备：mock静态资源

首先在测试文件开头mock你用到的两张图片资源，避免Jest解析静态资源报错：

jest.mock('你的img1资源路径', () => 'test-img1-url');
jest.mock('你的defaultImg资源路径', () => 'test-default-url');

2. 编写测试用例

方式1：shallow浅层渲染测试

适合只测组件本身逻辑，不关心子组件渲染的场景：

import { shallow } from 'enzyme';
import 你的组件名 from './你的组件路径';

describe('图片加载降级逻辑测试', () => {
  it('img加载失败时应替换为默认图，且清除onError避免循环触发', () => {
    const wrapper = shallow(<你的组件名 />);
    const imgNode = wrapper.find('img');
    
    // 构造模拟的error事件对象
    const mockEvent = {
      target: {
        onError: jest.fn(),
        src: 'test-img1-url'
      }
    };
    // 主动触发onError回调
    imgNode.invoke('onError')(mockEvent);

    // 结果断言
    expect(mockEvent.target.onError).toBeNull(); // 验证onError被置空，避免死循环
    expect(mockEvent.target.src).toBe('test-default-url'); // 验证src被替换为默认图
  });
});

方式2：mount全量渲染测试

如果需要模拟真实DOM事件触发的场景，用mount渲染：

import { mount } from 'enzyme';

it('全量渲染场景下加载失败触发降级', () => {
  const wrapper = mount(<你的组件名 />);
  const imgNode = wrapper.find('img');
  
  // 模拟真实error事件触发
  imgNode.simulate('error');

  // 断言真实DOM属性
  expect(imgNode.getDOMNode().onError).toBeNull();
  expect(imgNode.getDOMNode().src).toContain('test-default-url');
});