如何对具有 provide/inject 的 VUE 组件进行单元测试？

Question

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

我正在使用 shallowMount。我做了一些关于 this.And 的研究，有办法为 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;

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

如何对具有 provide/inject 的 VUE 组件进行单元测试？

How to unit test a VUE component that have provide/inject?

javascript

jestjs

vuejs2

vue-test-utils