title: Passing mocked methods to mount/shallowMount using Vue Test Utils
body: <p>Can somebody please explain to me why a mocked function passed in a <code>methods</code> object to <code>shallowMount</code> can not be accessed in the test through the wrapper object and instead must be accessed by first creating a variable as a reference to the mocked function?</p>
  
  <p>I have tried mount and shallowMount, created/mounted hooks and also by calling the function directly as opposed to inside the created/mounted hook.</p>
  
  <pre><code>// TestComponent.spec.js
  
  import TestComponent from '@/components/TestComponent'
  import { shallowMount, createLocalVue } from '@vue/test-utils'
  
  const localVue = createLocalVue()
  
  const setLoadingMock = jest.fn() // mock function that is accessible in the test
  
  function createWrapper () {
  
    const defaultMountingOptions = {
      localVue,
      methods: {
        setLoading: setLoadingMock
      }
    }
  
    return shallowMount(TestComponent, defaultMountingOptions)
  }
  
  describe('TestComponent.vue', () =&gt; {
  
    let wrapper
  
    beforeEach(() =&gt; {
      wrapper = createWrapper()
    });
  
    it('will call setLoading', () =&gt; {
      expect(wrapper.vm.setLoading).toHaveBeenCalled() 
      // FAILS. Console message:
      // Matcher error: received value must be a mock or spy function
  
      // Received has type:  function
      // Received has value: [Function bound mockConstructor]
    })
  
    it('will call setLoading', () =&gt; {
      expect(setLoadingMock).toHaveBeenCalled() // PASSES
    })
  })
  </code></pre>
  
  <pre><code>TestComponent.vue
  
  export default {
    name: 'TestComponent',
    mounted () {
      this.setLoading()
    },
  
    methods: {
      setLoading () {
        console.log('Original method'); // Never logs
      }
    }
  }
  </code></pre>