title: Vue-test-utils: How do I mock the return of an action in VueX?
body: <p>I'm writing a test for a Vue component which dispatches to a module store to perform an action and use the result from it.</p>
  <p>The action makes a call to our API so I don't want to run the test with that action, but instead mock it and return some dummy data to see that the rest of the method flow works.</p>
  <p>So in my test I add a mock store, with a mocked action which just returns hardcoded data, with the intent to see that the component method getData() sets the response of the action to the data.</p>
  <p>This doesn't seem to work however and instead it seems as if the real action is called. How do I set it up so that I can avoid calling the real actions and instead use the ones I create for the tests?</p>
  <p>Component method, simplified:</p>
  <pre><code>methods: {
      async getData() {
          const response = this.$store.dispatch(&quot;global/getDataFromAPI&quot;)
  
          if (!response) return
  
          this.$data.data = {...response.data}
      }
  }
  </code></pre>
  <p>Test code, simplified:</p>
  <pre><code>describe('Component.vue', () =&gt; {
    let localVue;
    let vuetify;
    let wrapper;
    let store;
  
    beforeEach(() =&gt; {
      localVue = createLocalVue();
      localVue.use(Vuex)
      vuetify = new Vuetify();
  
      let globalActions = {
        getDataFromAPI: async () =&gt; {
          return {
            status: 200,
            data: {
              information1: &quot;ABC&quot;,
              information2: 123,
            }
          }
        } 
      }
  
      store = new Vuex.Store({
        modules: {
          global: {
            actions: globalActions,
            namespaced: false
          },
        }
      })
  
      wrapper = mount(Component, {
        localVue,
        vuetify,
        attachTo: div,
        mocks: {
          $t: () =&gt; { },
          $store: store,
        },
      });
    });
  
    it('Data is set correctly', async () =&gt; {
      await wrapper.vm.getData();
  
      const dataInformation1 = wrapper.vm.$data.data.information1;
      expect(dataInformation1).toBe(&quot;ABC&quot;)
    });
  </code></pre>