图片引入测试组件（ImageTest.vue）

<template>
  <div class="image-test">
    <!-- 静态引入的本地图片 -->
    <img
      ref="staticImg"
      :src="require('@/assets/logo/logo.png')"
      alt="静态 logo"
    />

    <!-- 动态绑定的图片路径 -->
    <img ref="dynamicImg" :src="dynamicImgSrc" alt="动态图片" />

    <!-- 条件渲染的图片 -->
    <img
      v-if="showConditionImg"
      ref="conditionImg"
      :src="require('@/assets/images/hot.png')"
      alt="条件图片"
    />
  </div>
</template>

<script>
  export default {
    name: "ImageTest",
    data() {
      return {
        // 动态图片路径（可能来自接口或 props）
        dynamicImgSrc: require("@/assets/icons/svg/404.svg"),
        showConditionImg: true,
      };
    },
  };
</script>

图片引入测试（ImageTest.spec.js）

// src/components/__tests__/ImageTest.spec.js
import { mount } from "@vue/test-utils";
import ImageTest from "../JestTest/ImageTest.vue";

// Jest 无法直接处理图片文件，需要 mock 图片模块
jest.mock("@/assets/logo/logo.png", () => "/mock-logo.png");
jest.mock("@/assets/icons/svg/404.svg", () => "/mock-bg.png");
jest.mock("@/assets/images/hot.png", () => "/mock-icon.png");

describe("图片引入测试", () => {
  const wrapper = mount(ImageTest);

  test("静态引入的图片 src 正确", () => {
    // 获取静态图片元素
    const staticImg = wrapper.findComponent({ ref: "staticImg" });
    // 验证图片是否存在
    expect(staticImg.exists()).toBe(true);
    // 验证 src 是否被正确解析（匹配 mock 的路径）
    expect(staticImg.attributes("src")).toBe("/mock-logo.png");
  });

  test("动态绑定的图片 src 正确", () => {
    const dynamicImg = wrapper.findComponent({ ref: "dynamicImg" });
    expect(dynamicImg.exists()).toBe(true);
    // 动态引入使用 require，验证是否匹配 mock 路径
    expect(dynamicImg.attributes("src")).toBe("/mock-bg.png");
  });

  test("条件渲染的图片在显示状态下 src 正确", () => {
    const conditionImg = wrapper.findComponent({ ref: "conditionImg" });
    // 验证条件为 true 时图片存在
    expect(conditionImg.exists()).toBe(true);
    expect(conditionImg.attributes("src")).toBe("/mock-icon.png");
  });

  test("条件渲染的图片在隐藏状态下不显示", async () => {
    // 修改条件为 false，隐藏图片
    await wrapper.setData({ showConditionImg: false });
    const conditionImg = wrapper.findComponent({ ref: "conditionImg" });
    // 验证图片不存在
    expect(conditionImg.exists()).toBe(false);
  });
});