How to test components using getModule with vue-test-util

How would you go about stubbing actions and other methods inside of your store when using the getModule functionality inside of a component for testing?

MyComponent.vue

<template>
  <div>
    {{ this.exampleStore.someData  }}
    <button v-on:click="handleClick()">Do An Action</button>
    <LoadingIcon
      :v-if="this.exampleStore.isLoading"
    ></LoadingIcon>
  </div>
</template>

<script lang="ts">
// imports.....

@Component({
  components: {
    LoadingIcon
  }
})
export default class MyComponent extends Vue {
  private exampleStore: ExampleStore = getModule(ExampleStore)
  
  private created() {
   this.exampleStore.fetchSomeData()
  }

  private handleClick() {
    this.exampleStore.fetchSomeData()
  }
}
</script>

ExampleStore.ts

// imports...
@Module({ dynamic: true, namespaced: true, store, name: 'exampleStore' })
export default class ExampleStore extends VuexModule {
  public someData: any = ''

  @Action({ commit: 'someMutation')}
  public async fetchSomeData() {
  // async stuff

   return data
  }

  @Mutation
  public someMutation(payload: any) {
    return this.someData = payload
  }
}

Test

const localVue = createLocalVue()
localVue.use(Vuex)
let store: Vuex.Store<any>

beforeEach(() => {
  store = new Vuex.Store({})
})

describe('test component', () => {
  it('should have the correct html structure', () => {
    const component = shallowMount(MyComponent, {
     store, localVue
    } as any)
    expect(component).toMatchSnapshot()
  })
})

In the above example I would need to stub the fetchSomeData action

[Robin-Hoodie]

Is there still not a better solution or any documentation related to this ? We’re nearing 2021 and this issue is so far still the best source of documentation I can find on testing dynamic Vuex modules.

[jubairsaidi]

sorry for the delay! been a bit busy 😕

so lets assume you use getModule(FooModule, this.$store) from inside a component computed property like

get fooModule() {
  return getModule(FooModule, this.$store)
}

then all you have to do is override fooModule in your computed attributes when creating your wrapper, i.e.

    const wrapper = shallowMount(FooComponent, {
      computed: {
        fooModule: () => ({}),
      },
      localVue,
    });

You can also return your own mock version of the store if you like. personally I don’t like testing store logic in my components so I override it with an empty object, and mock the other getters that I use to access the store getters, and methods used to access the store mutations and actions.