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

Question

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

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

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

Answer 1

您在Provide属性中设置的内容是用于注入已安装组件的内容。

在单元测试中，我有

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;

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