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

【问题标题】：How to unit test a VUE component that have provide/inject?如何对具有提供/注入的 VUE 组件进行单元测试？
【发布时间】：2019-05-04 08:52:34
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript vuejs2 jestjs vue-test-utils

【解决方案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;

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

【讨论】：

你的意思是我们会在组件处浅挂载provide。这样当该组件将在inject 看到数据时？？？
是的，您提供的元素将被注入到组件中。同一枚硬币的两面
@Slicksim 如何测试provided 数据的变化？如果你想检查你的组件对这些变化的反应
@TzahiLeh 你的意思是作为观察者？
@Slicksim 没错。我正在观察一个注入的值，我想测试观察者。为此，我需要在测试期间更改提供的数据 - 但如何更改？