context.root.$store is undefined in tests with the Composition API

[saifahn]

Version

1.0.4

Reproduction link

https://github.com/saifahn/composition-api-context-store-undefined-vtu

Steps to reproduce

1. Run the test suite via npm run test:unit

You will see the error.

What is expected?

• Ideally vue-test-utils be able to handle this and provide the store to the context of the Composition API components.
• context.root.$store should return the store provided in the tests rather than undefined.

What is actually happening?

• context.root.$store returns undefined, so tests involving components that use context.root.$store will fail.
• The component itself is functional, so it looks like a problem with vtu, unless I am mistaken.

---

I have seen people with similar problems using context.root.$router as well.
Here's one:

https://forum.vuejs.org/t/vue-composition-api-vue-router-unit-test/88702

[jefrydco]

Hi @saifahn , instead of getting $store object from context.root, we can use getCurrentInstance to get vm object. Then we can get the $store by only referencing it from vm.

  setup() {
    const vm = getCurrentInstance()

    const count = computed(() => vm.$store.state.count);
    function increaseCount() {
      vm.$store.commit('increment')
    }

    return { count, increaseCount }
  }

[lmiller1990]

It should be available on context too though, right? Good to have a work-around.

Actually this is probably better than using ctx.root, which does not exist in Vue 3. getCurrentInstance() does.

[lmiller1990]

I fixed this in #1661 quick review someone?

[saifahn]

It should be available on context too though, right? Good to have a work-around.

It seems like a reasonable amount of people run into this issue, so supporting it seems good.

Hi @saifahn , instead of getting $store object from context.root, we can use getCurrentInstance to get vm object. Then we can get the $store by only referencing it from vm.

Thanks for this @jefrydco! Managed to get the tests working in this way.
I seemed to come across context rather than getCurrentInstance, so I was wondering if this could be somehow made more common knowledge? I also wasn't aware of the fact that context.root does not exist in Vue 3.

[lmiller1990]

It is possible it does exist, I could be wrong. I always use a useStore hook. Anyway, we have both now in this lib, I'll do a release soon so you can use root if you like.

[lmiller1990]

Fix here #1661

Release soon.

[saomartinho]

Version

1.0.3

Hi, I'm not getting access to root.$route, do you know what it could be?

I've already spent a few hours trying to solve this problem and I'm not succeeding.

My component:

<script>
export default {
    setup ( _, { root }) {
       // behavior
       ...
        watch( () => root.$route,
            ({ query, meta }) => {
               ...
            }, {
                immediate: true
            });
    }
};
</script>

My test:

import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueCompositionAPI from '@vue/composition-api';
import Component from '@/components/bundles/layout/Component';
import router from '@/router/';

const localVue = createLocalVue();
localVue.use( VueCompositionAPI );
localVue.use( router );

describe( 'Component', () => {
    it( 'Insert', () => {
        const wrapper = shallowMount( Component, {
            mocks: {
                $t: () => ({})
            },
            localVue,
            router
        });

        console.log( wrapper.html() );
    });
});

Return this error:

TypeError: Cannot destructure property 'query' of 'undefined' as it is undefined.

[lmiller1990]

I think this was fixed in v1.0.5.

Can you update to the latest version?

[saomartinho]

Oh, nevermind. I didn't even compare the versions, I was so focused on the problem ...: / sorry and thanks 💯