Jest、Vue3 和 Typescript：如何通过符号模拟注入？

Posted 2023-02-22

【中文标题】Jest、Vue3 和 Typescript：如何通过符号模拟注入？

【英文标题】：Jest, Vue3 and Typescript: How to mock injection by symbol?

【发布时间】：2021-06-26 22:25:08

【问题描述】：

我有这种情况：

// symbols.ts - Injection Key defined as a Symbol
export const FAQ_SERVICE: InjectionKey<FAQService> = Symbol('FAQService');

// main.ts - globally provides a service using the injection key
app.provide(FAQ_SERVICE, new FAQService());

// FAQIndex.vue - component using the injected service
…
setup() 
  return 
    faqService: inject(FAQ_SERVICE) as FAQService,
  ;

…

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

component = mount(FAQIndex, 
  global: 
    provide: 
      'FAQ_SERVICE':  /* mock object */ ,
    ,
  ,
);

但是如上例中通过符号注入服务时，我该怎么做呢？

【问题讨论】：

这是一个符号，所以用它作为符号provide: [FAQ_SERVICE]: ...

【参考方案1】：

在您的测试中导入FAQ_SERVICE，就像您的应用一样：

import  FAQ_SERVICE  from './symbols'

it('does something', () => 
  const component = mount(FAQIndex, 
    global: 
      provide: 
        [FAQ_SERVICE as symbol]:  /* mock object */ 
      
    
  )
)