Vitest在Nuxt 3中无法解析图片导入的问题及Mock方法咨询

问题原因 #

Vitest默认不会处理图片这类静态资源，当组件使用~/这类别名导入图片时，Vitest无法解析对应的文件路径，从而抛出导入失败的错误。直接导入图片虽然能临时解决，但复用性差，Mock是更优的方案。

具体解决方法 #

方法1：全局Mock所有图片（推荐）

在Vitest配置文件（vitest.config.ts或vite.config.ts）中，通过moduleNameMapper统一映射所有图片资源到Mock值，同时确保别名配置正确：

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    moduleNameMapper: {
      // 匹配所有图片格式，映射到自定义Mock文件或直接返回占位字符串
      '^~/assets/(.*)\\.(png|jpe?g|gif|svg)$': '<rootDir>/tests/mocks/imageMock.ts'
      // 也可以直接返回字符串，无需额外文件：
      // '^~/assets/(.*)\\.(png|jpe?g|gif|svg)$': '"mock-static-image"'
    },
    resolve: {
      // 配置别名，确保Vitest识别`~`指向src目录
      alias: {
        '~': '<rootDir>/src'
      }
    }
  }
})

如果使用自定义Mock文件，创建tests/mocks/imageMock.ts：

// 返回模拟的图片URL，适配Vue组件中对静态资源导入的使用场景
export default 'mock-image-url'

方法2：单个测试文件中Mock指定图片

如果只需要在特定测试中Mock某张图片，使用Vitest的vi.mock方法：

// ActionCenter.spec.ts
import { mount } from '@vue/test-utils'
import ActionCenter from '@/components/ActionCenter/ActionCenter.vue'

// Mock目标SVG图片
vi.mock('~/assets/components-icons/warning_shield.svg', () => ({
  default: 'mock-warning-shield-svg'
}))

test('ActionCenter组件渲染正常', () => {
  const wrapper = mount(ActionCenter)
  expect(wrapper.exists()).toBe(true)
})

注意事项 #

• 确保Vitest配置中的resolve.alias和项目的别名规则一致，否则~/这类路径无法被正确解析。
• 如果组件中使用了Vite的import.meta.glob批量导入图片，需要针对性调整Mock规则，匹配glob导入的路径模式。

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