title: Vue Test Utils / Jest - How to test if class method was called within a component method
body: <p>I have an interesting problem with a unit test of mine. My unit test is written to click on a button inside a component. This button calls a component method which contains an instance of a class <code>Service</code> (a wrapper class for axios). The only thing this component method does is call <code>Service.requestPasswordReset()</code>. My unit test needs to verify that <code>Service.requestPasswordReset</code> was called.</p>
  
  <p>I know I'm mocking my Service class correctly, because this passes in my unit test:</p>
  
  <pre><code>await Service.requestPasswordReset()
  expect(Service.requestPasswordReset).toHaveBeenCalled()
  </code></pre>
  
  <p>And I know that I'm calling the method correctly on click because this passes in my unit test:</p>
  
  <pre><code>await wrapper.find('button').trigger('click')
  expect(mockMethods.resend).toHaveBeenCalled()
  </code></pre>
  
  <p>I just can't get my test to register that the <code>Service</code> method gets called. Any ideas?</p>
  
  <p>Component</p>
  
  <pre><code>&lt;template lang="pug"&gt;
  Layout
      section
          header( class="text-center py-4 pb-12")
              h1( class="text-grey-boulder font-light mb-4") Recovery Email
              p( class="text-orange-yellow") A recovery email has been sent to your email address
  
          div( class="text-center")
              div( class="mb-6")
                  button(
                      type="button"
                      @click.stop="resend()"
                      class="bg-orange-coral font-bold text-white py-3 px-8 rounded-full w-48"
                  ) Resend Email
  &lt;/template&gt;
  
  &lt;script&gt;
  import Layout from '@/layouts/MyLayout'
  import Service from '@/someDir/Service'
  export default {
      name: 'RecoveryEmailSent',
      page: {
          title: 'Recovery Email Sent',
      },
      components: {
          Layout,
      },
      data() {
          return {
              errorMessage: null
          }
      },
      computed: {
          userEmail() {
              const reg = this.$store.getters['registration']
              return reg ? reg.email : null
          },
      },
      methods: {
          async resend() {
              try {
                  await Service.requestPasswordReset({
                      email: this.userEmail,
                  })               
              } catch (error) {
                  this.errorMessage = error
              }
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Service.js</p>
  
  <pre><code>import client from '@/clientDir/BaseClient'
  
  class Service {
      constructor() {
          this.client = client(baseUrl)
      }
  
      requestPasswordReset(request) {
          return this.client.post('/account_management/request_password_reset', request)
      }
  }
  
  export { Service }
  
  export default new Service()
  </code></pre>
  
  <p>Service.js in <code>__mock__</code></p>
  
  <pre><code>export default {
      requestPasswordReset: jest.fn(request =&gt; {
          return new Promise((resolve, reject) =&gt;
              resolve({
                  data: {
                      statusCode: 'Success',
                  },
              })
          )
      })
  }
  </code></pre>
  
  <p>Unit Test</p>
  
  <pre><code>jest.mock('@/someDir/Service')
  import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
  import RecoveryEmailSent from './AccountManagement.RecoveryEmailSent'
  import Service from '@/someDir/Service'
  const localVue = createLocalVue()
  // localVue.use(Service) // &lt;-- Tried this, didn't work
  
  describe('Recovery Email Sent', () =&gt; {
  
      it('should resend recovery email', async () =&gt; {
          const mockMethods = {
              resend: jest.fn()
          }
          const email = 'testemail@test.com'
          const wrapper = mount(RecoveryEmailSent, {
              localVue,
              computed: {
                  userEmail() {
                      return email
                  },
              },
              methods: mockMethods
          })
  
          // await Service.requestPasswordReset()
          await wrapper.find('button').trigger('click')
          expect(mockMethods.resend).toHaveBeenCalled()
          expect(Service.requestPasswordReset).toHaveBeenCalled()
      })
  })
  </code></pre>