javascript - 如何对提供/注入(inject)的 VUE 组件进行单元测试？

Question

我正在编写一些单元测试，但我遇到了具有 inject 属性的组件的问题。

我正在使用 shallowMount。我对此做了一些研究。并且有办法为 provide https://vue-test-utils.vuejs.org/api/options.html#provide 创建假数据.但是，我没有看到任何关于 inject 的信息或提示。

所以，我需要一些关于如何在 Vuejs 中使用 inject 进行单元测试的建议？

Answer 1

你在 provide 属性中设置的就是用来注入(inject)到挂载组件中的。

在我的单元测试中我有

metadataModule = sandbox.createStubInstance(MetadataModule);
metadataService = sandbox.createStubInstance(MetadataService);

wrapper = shallowMount(MoveFileElement, {
        provide: {
            [SYMBOLS.METADATAMODULE]: metadataModule,
            [SYMBOLS.METADATASERVICE]: metadataService,
        },
        ....

然后在我的组件中有

export default class MoveFileElement extends Mixins(Utilities) {       
    @Inject(SYMBOLS.METADATAMODULE) public metadataModule!: IMetadataModule;
    @Inject(SYMBOLS.METADATASERVICE) public metadataService!: MetadataService;

现在组件可以访问我在单元测试中准备的元数据模块的假版本。