Jest、Vue3 和 Typescript:如何通过符号模拟注入?
Jest, Vue3 and Typescript: How to mock injection by symbol?
我遇到这种情况:
// 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 */ },
},
},
});
但是当服务像上面的例子一样通过 Symbols 注入时,我该怎么办呢?
像您的应用一样在您的测试中导入 FAQ_SERVICE
:
import { FAQ_SERVICE } from './symbols'
it('does something', () => {
const component = mount(FAQIndex, {
global: {
provide: {
[FAQ_SERVICE as symbol]: { /* mock object */ }
}
}
})
})
我遇到这种情况:
// 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 */ },
},
},
});
但是当服务像上面的例子一样通过 Symbols 注入时,我该怎么办呢?
像您的应用一样在您的测试中导入 FAQ_SERVICE
:
import { FAQ_SERVICE } from './symbols'
it('does something', () => {
const component = mount(FAQIndex, {
global: {
provide: {
[FAQ_SERVICE as symbol]: { /* mock object */ }
}
}
})
})