title: how to spy on dispatch on fetch/middleware method
body: <p>I'm trying to test a simple page</p>
  
  <pre><code>&lt;template&gt;
    &lt;HomeTemplate /&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
  import Vue from 'vue'
  
  export default Vue.extend({
    async fetch(context) { // or middleware(context)
      await context.store.dispatch('categories/index')
    }
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>I would like to spy on dispatch and know if everything went perfectly, 
  so i triedbut first I tried to spy on just the action:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Wrapper, shallowMount, createLocalVue } from '@vue/test-utils'
  import Vuex, { Store } from 'vuex'
  import HomePage from './index.vue'
  import { CategoriesState } from '@/store/categories'
  
  const localVue = createLocalVue()
  localVue.use(Vuex)
  
  describe('HomePage', () =&gt; {
    type Instance = InstanceType&lt;typeof HomePage&gt;
    let wrapper: Wrapper&lt;Instance&gt;
  
    let store: Store&lt;CategoriesState&gt;
  
    const mockIndex: jest.Mock = jest.fn()
  
    beforeAll(() =&gt; {
      store = new Vuex.Store({
        modules: {
          categories: {
            namespaced: true,
            actions: { index: mockIndex }
          }
        }
      })
  
      wrapper = shallowMount(HomePage, {
        stubs: ['HomeTemplate'],
        localVue,
        store
      })
    })
  
    it('should call vuex action to fetch categories', () =&gt; {
      expect(mockIndex).toHaveBeenCalledWith('categories/index')
    })
  })
  
  </code></pre>
  
  <p>considering that the <code>fetch()</code> or <code>middleware()</code> method receives the <a href="https://nuxtjs.org/api/pages-fetch" rel="nofollow noreferrer">nuxt context</a>, I tried to mock it</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Wrapper, shallowMount } from '@vue/test-utils'
  import HomePage from './index.vue'
  
  describe('HomePage', () =&gt; {
    type Instance = InstanceType&lt;typeof HomePage&gt;
    let wrapper: Wrapper&lt;Instance&gt;
  
    const mockIndex: jest.Mock = jest.fn()
  
    beforeAll(() =&gt; {
      wrapper = shallowMount(HomePage, {
        stubs: ['HomeTemplate'],
        mocks: {
          context: {
            store: {
              dispatch: mockIndex
            }
          }
        }
      })
    })
  
    it('should call vuex action to fetch categories', () =&gt; {
      expect(mockIndex).toHaveBeenCalledWith('categories/index')
    })
  })
  </code></pre>
  
  <p>but it still doesn't work,
  <a href="https://i.stack.imgur.com/qivTC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qivTC.png" alt="enter image description here"></a></p>
  
  <p>could someone help me make it work properly?</p>
  
  <p>thank you!</p>