Jest测试验证v-img

// 假设我们有一个简单的 v-img 组件
// VImg.vue
<template>
  <img :src="src" @error="handleError" />
</template>

<script>
export default {
  props: {
    src: String
  },
  methods: {
    handleError() {
      this.$emit('error');
    }
  }
};
</script>

// VImg.spec.js
import { shallowMount } from '@vue/test-utils';
import VImg from './VImg.vue';

describe('VImg', () => {
  it('should emit error event when image fails to load', async () => {
    const wrapper = shallowMount(VImg, {
      propsData: {
        src: 'invalid-url.jpg'
      }
    });

    await wrapper.vm.$nextTick();

    expect(wrapper.emitted().error).toBeTruthy();
  });

  it('should display the image when the URL is valid', async () => {
    const wrapper = shallowMount(VImg, {
      propsData: {
        src: 'valid-url.jpg'
      }
    });

    await wrapper.vm.$nextTick();

    expect(wrapper.find('img').attributes('src')).toBe('valid-url.jpg');
  });
});

// 模拟图片加载失败
global.fetch = jest.fn(() =>
  Promise.reject(new Error('Network error'))
);

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^https?://.*$': '<rootDir>/__mocks__/fileMock.js'
  }
};