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

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

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

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

最佳答案

您在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;