injection "store" not found

[techlab23]

Hello,

I'm trying to setup tests for the component using mock vuex store, however i'm running into an issue where i get the following warning and subsequent error in setup function of the component.

Here is the sample component that i used to reproduce this issue

https://github.com/techlab23/task-management-app-ts/blob/tests/tests/App.spec.ts

      [Vue warn]: injection "store" not found. 
        at <Anonymous ref="VTU_COMPONENT" > 
        at <VTUROOT>

      16 |   components: { AppHeader, AppLoadingIndicator },
      17 |   setup() {
    > 18 |     const store = useStore();
         |                   ^
      19 |     store.dispatch('fetchData');
      20 |     const isLoading = computed<boolean>(() => store.getters.isLoading);
      21 |     return {

Following above error i get another error in calling a dispatch function

App › calls fetchData to load initial data

    TypeError: Cannot read property 'dispatch' of undefined

      17 |   setup() {
      18 |     const store = useStore();
    > 19 |     store.dispatch('fetchData');
         |           ^
      20 |     const isLoading = computed<boolean>(() => store.getters.isLoading);
      21 |     return {
      22 |       isLoading,

      at setup (src/App.vue:19:11)

Appreciate any pointers is resolving this issue.

[cexbrayat]

@techlab23 The error injection "store" not found. indicates that in your current test there is no store provided.

You need to provide the store to your component, using https://next.vue-test-utils.vuejs.org/api/#global
Something like:

const wrapper = mount(App, { 
  global: { 
    provide: { 
      store: createStore(...) 
    } 
  } 
});

[maurer2]

Hello, how would one provide a mock store when using an injection key with a custom useStore function as recommended here https://next.vuex.vuejs.org/guide/typescript-support.html#simplifying-usestore-usage ?

I can get the previous example and also another approach from here (#457 (comment)) running without an injection key, but once I use a key, the store can't be found.

main

import { store, key } from './store/index';

createApp(App)
  .use(store, key)
  .mount('#app');

store

import { createStore, useStore as genericUseStore } from 'vuex';

export const key: InjectionKey<Store> = Symbol('key');

export function useStore(): Store {
  return genericUseStore(key);
}

I reckon I could mock useStore() in every component, but maybe there is a more elegant solution.

Thanks

[cexbrayat]

Here is what I usually do (not your exact use-case, I copied an example from my book)

const wrapper = mount(App, { global: { provide: { [storeKey as symbol]: mockStore } } });

with mockStore your fake store. The hard thing to figure out is the necessary cast as symbol that we can' get rid of (TS issue).

[maurer2]

Okay, nice. Seems to work. Thanks.

Cheers

[michealroberts]

@cexbrayat 's answer should be in the official docs for testing injection Symbol keys. I will try an add a PR for this ASAP. cc. @lmiller1990 Do you agree before making this PR? :)

[cexbrayat]

@michealroberts A PR would be greats thanks!