Jest结合Vue3与TypeScript：如何Mock Symbol键的依赖注入服务？

核心实现逻辑 #

Vue Test Utils 的 global.provide 配置本身原生支持任意类型作为提供依赖的key，包括Symbol，不需要做特殊适配。只要测试时传入的key和业务代码中定义的注入键是同一个Symbol引用，就能完成依赖配对，替换原有服务为Mock对象。

具体实现步骤 #

1. 从业务代码中导入预先定义的Symbol类型注入键，绝对不要在测试文件内重新生成同名称的Symbol实例（Symbol的唯一性会导致引用不匹配，注入失败）
2. 提前定义好需要的Mock服务对象，绑定需要的Jest模拟函数
3. 在mount的配置项中，使用导入的Symbol作为global.provide对象的key，挂载对应的Mock服务

可直接复用的测试代码示例 #

import { mount, VueWrapper } from '@vue/test-utils'
import FAQIndex from '@/components/FAQIndex.vue'
// 导入业务代码中统一导出的注入键引用，这一步是核心
import { FAQ_SERVICE } from '@/symbols'
// 定义Mock服务
const mockFAQService = {
  fetchFaqList: jest.fn().mockResolvedValue([{ id: 1, title: '如何重置密码' }]),
  submitQuery: jest.fn().mockResolvedValue({ success: true })
}
describe('FAQIndex 组件单元测试', () => {
  let wrapper: VueWrapper
  beforeEach(() => {
    // 每次测试前清空Mock函数的调用记录，避免用例之间相互影响
    jest.clearAllMocks()
    wrapper = mount(FAQIndex, {
      global: {
        provide: {
          // 直接使用导入的Symbol作为对象key即可，写法和字符串key完全一致
          [FAQ_SERVICE]: mockFAQService
        }
      }
    })
  })
  // 测试用例示例
  it('组件挂载时会自动调用FAQ服务拉取列表数据', () => {
    expect(mockFAQService.fetchFaqList).toHaveBeenCalledTimes(1)
  })
})

常见踩坑提醒 #

• 禁止在测试文件中重新执行Symbol('FAQService')创建新实例：每次调用Symbol()都会生成全局唯一的值，和业务代码导出的注入键不是同一个引用，会导致组件inject时拿到undefined，无法匹配到对应的Mock值
• 如果需要动态调整Mock值，也可以将global.provide配置为函数形式，在函数内部返回带Symbol key的依赖对象，适配更灵活的测试场景

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