Vue 3(compat)中搭配Vitest使用Quasar插件致测试失败

问题根源 #

报错指向vue-i18n的编译错误，核心原因是Quasar Notify插件默认依赖vue-i18n实现国际化提示，但测试环境存在两个关键问题：

1. 未显式初始化i18n实例，Quasar内部自动初始化i18n时触发编译异常
2. Vitest默认未转译@quasar、vue-i18n等CommonJS格式依赖，引发语法解析错误

分步解决 #

1. 测试中显式初始化i18n与Quasar插件 #

在测试文件中手动创建i18n实例，与Quasar插件一同挂载，避免Quasar自动初始化i18n导致的冲突：

import { render } from '@testing-library/vue'
import { createQuasar } from '@quasar/vite-plugin'
import { createI18n } from 'vue-i18n'
import YourComponent from './YourComponent.vue'

// 初始化基础i18n配置，匹配Quasar的国际化结构
const i18n = createI18n({
  legacy: false, // 适配Vue3组合式API
  locale: 'en-US',
  messages: {
    'en-US': {
      quasar: { notify: {} } // 提供Notify所需的基础翻译结构
    }
  }
})

// 初始化Quasar插件
const quasarPlugin = createQuasar({
  plugins: { Notify }
})

// 渲染组件时同时挂载i18n和Quasar
test('组件渲染正常', () => {
  render(YourComponent, {
    global: {
      plugins: [i18n, quasarPlugin]
    }
  })
})

2. 调整Vitest配置，转译相关依赖 #

修改vitest.config.ts，将@quasar和vue-i18n加入内联转译列表，确保Vitest能正确解析这些模块：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls },
      compatConfig: { MODE: 2 }
    }),
    quasar({
      sassVariables: 'src/quasar-variables.sass'
    })
  ],
  test: {
    environment: 'jsdom',
    // 内联转译Quasar和vue-i18n依赖
    deps: {
      inline: ['@quasar', 'vue-i18n']
    }
  }
})

3. 可选：Mock vue-i18n绕过编译逻辑 #

如果上述方法仍不生效，可直接Mock vue-i18n核心方法，跳过翻译编译流程：

import { vi } from 'vitest'

// 在测试文件顶部Mock vue-i18n
vi.mock('vue-i18n', () => ({
  createI18n: vi.fn(() => ({ install: vi.fn() })),
  useI18n: vi.fn(() => ({ t: (key) => key })) // 直接返回key，避免翻译编译
}))

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