Jest、Vue3 和 Typescript:如何通过符号模拟注入?

Sir*_*ius 3 typescript vue.js jestjs vue-test-utils vuejs3

我有这样的情况:

\n
// symbols.ts - Injection Key defined as a Symbol\nexport const FAQ_SERVICE: InjectionKey<FAQService> = Symbol('FAQService');\n\n// main.ts - globally provides a service using the injection key\napp.provide(FAQ_SERVICE, new FAQService());\n\n// FAQIndex.vue - component using the injected service\n\xe2\x80\xa6\nsetup() {\n  return {\n    faqService: inject(FAQ_SERVICE) as FAQService,\n  };\n}\n\xe2\x80\xa6\n
Run Code Online (Sandbox Code Playgroud)\n

现在我想使用 jest 测试这个组件并模拟该服务。我知道当我使用纯字符串提供对象时,我可以通过以下模式来做到这一点:

\n
component = mount(FAQIndex, {\n  global: {\n    provide: {\n      'FAQ_SERVICE': { /* mock object */ },\n    },\n  },\n});\n
Run Code Online (Sandbox Code Playgroud)\n

但是,当如上例所示通过符号注入服务时,我该如何做到这一点呢?

\n

ton*_*y19 12

FAQ_SERVICE就像您的应用程序一样导入您的测试:

import { FAQ_SERVICE } from './symbols'

it('does something', () => {
  const component = mount(FAQIndex, {
    global: {
      provide: {
        [FAQ_SERVICE as symbol]: { /* mock object */ }
      }
    }
  })
})
Run Code Online (Sandbox Code Playgroud)