如何在 vue-test-utils 上测试 Vue-属性-Decorator 的 @InjectReactive()？

Question

我不确定在挂载组件时如何提供注入反应数据。我不需要确切的解决方案，我将不胜感激。

这是我的父组件：

@Component
export default class Preferences extends Vue {
  @ProvideReactive() serviceLevels: CarrierFilterType[] = [];
  // more code here...

这是我的子组件：

@Component
export default class CarrierFilters {
  @InjectReactive() readonly serviceLevels!: CarrierFilterType[];
   // more code here...

这是我的测试文件：

// other imports are here...

import { supportedServiceLevels } from '../../constant';

// initial setup code here...

describe('Settings > Preferences > Content > CarrierFilters.vue', () => {
  beforeEach(() => {
    options = {
      localVue,
      i18n,
      store,
      router,
      vuetify: new Vuetify(),
      provide: { // I am not sure how to provide the inject-reactive data here...?
        serviceLevels: [...supportedServiceLevels],
      },
    };

    initWrapper = shallowMount(CarrierFilters, options);
  });
  // more code here...

目前，我在运行测试时遇到以下控制台错误：

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: Injection "__reactiveInject__" not found

    found in

    ---> <CarrierFilters>
           <Root>

顺便说一句，上面的代码适用于 @Inject 但不适用于 @InjectReactive。我看过他们的源代码，看来我必须以某种方式提供此密钥__reactiveInject__。

Answer 1

将所有反应属性放入__reactiveInject__。例如：

const wrapper = mount(Component, {
  localVue,
  provide: {
    __reactiveInject__: {
      foo: "bar"
    },
  },
});

如何在 vue-test-utils 上测试 Vue-属性-Decorator 的 @InjectReactive()？

How to test @InjectReactive() of Vue-Property-Decorator on vue-test-utils?

vue.js

vuejs2

vue-test-utils

vue-property-decorator