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

Question

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

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

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

Answer 1

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

在我的单元测试中，我有

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;

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