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

Question

I am not sure how to provide the inject-reactive data when I mount the component. I don't need the exact solution, just a hint would be much appreciated.

Here is my parent component:

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

Here is my child component:

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

Here is my test file:

// 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...

Currently, I am getting the below console error when I run the test:

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

    found in

    ---> <CarrierFilters>
           <Root>

By the way, the above code is working with the @Inject but not with the @InjectReactive. I have seen their source code, seems like I have to provide this key __reactiveInject__ somehow.

erikvimz · Accepted Answer · 2022-04-26 20:43:05Z

4

Put all reactive properties inside __reactiveInject__. For example:

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

answered Apr 26, 2022 at 20:43

erikvimz

5,4966 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shamim Hossain Over a year ago

It does remove the warning but it doesn't pass the value to the Component. The value in this case foo is always undefined.

erikvimz Over a year ago

@ShamimHossain Interesting, it passes the value just fine for me... Try updating your packages or there may be a problem somewhere else in your project.

Froxx Over a year ago

Thank you so much! I was looking for this for ages. How did you find out about this? I can't find any docs showing this.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related