Quasar Vitest：如何为开发/生产及测试环境配置i18n启动文件

问题背景 #

Quasar官方推荐在启动文件中配置i18n，示例代码如下：

import { defineBoot } from '#q-app/wrappers'
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

export default defineBoot(({ app }) => {
  const i18n = createI18n({
    locale: 'en-US',
    globalInjection: true,
    messages
  })

  // Set i18n instance on app
  app.use(i18n)
})

但使用Vitest进行单元测试时，Quasar的启动文件不会自动执行，导致i18n未初始化，Vue组件和普通JS类中使用i18n的代码都会测试失败，尝试installQuasarPlugin方案也未能解决问题。

解决方案 #

1. 抽离i18n初始化逻辑 #

把i18n的创建逻辑单独封装成独立文件，方便测试环境和生产环境复用：

// src/i18n/index.js
import { createI18n } from 'vue-i18n'
import messages from './messages' // 替换为你的语言包路径

export const createI18nInstance = () => {
  return createI18n({
    locale: 'en-US',
    globalInjection: true,
    messages
  })
}

// 原启动文件修改为：
import { defineBoot } from '#q-app/wrappers'
import { createI18nInstance } from 'src/i18n'

export default defineBoot(({ app }) => {
  const i18n = createI18nInstance()
  app.use(i18n)
})

2. 针对不同场景初始化i18n #

Vue组件测试

在组件测试的setup阶段，手动创建并挂载i18n实例：

import { mount } from '@vue/test-utils'
import { createI18nInstance } from 'src/i18n'
import TargetComponent from './TargetComponent.vue'

describe('TargetComponent', () => {
  const i18n = createI18nInstance()

  it('渲染正常且i18n生效', () => {
    const wrapper = mount(TargetComponent, {
      global: {
        plugins: [i18n]
      }
    })
    // 编写你的测试逻辑
  })
})

普通JS类测试

如果JS类依赖全局$t方法，可在测试文件开头初始化i18n并挂载到全局；若类直接依赖i18n实例，可直接传入：

import { createI18nInstance } from 'src/i18n'
import TargetService from './TargetService'

// 初始化i18n并挂载全局$t
const i18n = createI18nInstance()
globalThis.$t = i18n.global.t

describe('TargetService', () => {
  it('使用i18n的方法运行正常', () => {
    const service = new TargetService()
    expect(service.getLocalizedContent()).toBe('预期的多语言文本')
  })
})

3. 全局统一配置（可选） #

如果大部分测试都需要i18n，可以在Vitest全局setup文件中统一初始化：

// tests/setup.js
import { createI18nInstance } from '../src/i18n'
import { config } from '@vue/test-utils'

const i18n = createI18nInstance()
// 全局挂载$t方法
globalThis.$t = i18n.global.t
// 给Vue组件测试全局注册i18n插件
config.global.plugins.push(i18n)

配置完成后，测试环境中的i18n就能正常初始化，组件和JS类的测试均可正常运行。

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