title: Mocking methods on a Vue instance during TDD
body: <p>I'm learning TDD whilst building my Vue app, and trying to abide by the strict laws of only writing enough production code to satisfy a failing unit test. I am really enjoying this approach, but I have run into a roadblock in regards to adding methods to a Vue instance, and testing that they have been called when the event fires from the element in the template.</p>
  <p>I cannot find any suggestions as to how I can mock a Vue method given that if I mock the proxied method, it ends up not being called (I'm using Jest and Vue Test Utils).</p>
  <p>I am also using Cypress, so I can fill in this test in e2e, but I would like to be able to cover as much as possible with unit tests.</p>
  <p>I own the book &quot;Testing Vue.js Applications&quot; by Edd Yerburgh, but in the section regarding testing component methods, he simply states the following:</p>
  <blockquote>
  <p>Often, components use methods internally. For example, to log to the console when a button is clicked [...] You can think of these as private methods—they aren’t intended to be used outside of the component. Private methods are implementation details, so you don’t write tests for them directly.</p>
  </blockquote>
  <p>This approach obviously does not allow the stricter laws of TDD to be followed, so how do the TDD purists handle this?</p>
  <p><em>ButtonComponent.vue</em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;button @click=&quot;method&quot;&gt;Click me&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default: {
          methods: {
              method () {
                  // Have I been called?
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p><em>ButtonComponent.spec.js</em></p>
  <pre class="lang-js prettyprint-override"><code>it('will call the method when clicked', () =&gt; {
      const wrapper = shallowMount(ButtonComponent)
      const mockMethod = jest.fn()
      wrapper.vm.method = mockMethod
  
      const button = wrapper.find('button')
      button.vm.$emit('click')
  
      expect(mockMethod).toHaveBeenCalled()
      // Expected mock function to have been called, but it was not called
  })
  </code></pre>