Testing that a method is called when component is mounted

Question

I'm trying to test that a method gets called when a component is mounted but it keeps failing with

Expected mock function to have been called one time, but it was called zero times.

Here is the component:

<template>
  <b-form-input
    class="mr-2 rounded-0"
    placeholder="Enter Search term..."
    id="input-keyword"
  />
</template>
<script>
export default {
  name: 'job-search-test',
  methods: {
    async searchJobs () {
      console.log('Calling Search Jobs from JobsSearchTest')
    }
  },
  mounted () {
    this.searchJobs()
  }
}
</script>

Here is the test:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import JobSearchTest from '@/components/jobs/JobSearchTest'

const localVue = createLocalVue()
localVue.use(BootstrapVue)

describe('JobsSearchTest.vue', () => {
  it('should call searchJobs method when component is mounted', () => {
    const methods = {
      searchJobs: jest.fn()
    }
    shallowMount(JobSearchTest, {
      mocks: {
        methods
      },
      localVue })
    expect(methods.searchJobs).toHaveBeenCalledTimes(1)
  })
})

However, the following test passes

import { shallowMount, createLocalVue } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import JobSearchTest from '@/components/jobs/JobSearchTest'

const localVue = createLocalVue()
localVue.use(BootstrapVue)

describe('JobsSearchTest.vue', () => {
  it('should call searchJobs method when component is mounted', () => {
    let searchJobs = jest.fn()
    shallowMount(JobSearchTest, {
      methods: {
        searchJobs
      },
      localVue })
    expect(searchJobs).toHaveBeenCalledTimes(1)
  })
})

According to Testing VueJs Applications by Edd Yerburgh one tests a function by stubbing it with a Jest mock the following way

  it('should call $bar.start on load', () => {
    const $bar = {
      start: jest.fn(),
      finish: () => {}
    }
    shallowMount(ItemList, { mocks: $bar })
    expect($bar.start).toHaveBeenCalledTimes(1)
  })

In my eyes, this is essentially what I am doing in the first test, which fails.

Any help with why this could be happening will be appreciated.

Answer 1

mocks option mocks instance properties. mocks: { methods } assumes that there's methods property in Vue component. Since this.methods.searchJobs() isn't called, the test fails.

It's searchJobs method, the test should be as the working snippet shows:

shallowMount(JobSearchTest, {
  methods: {
    searchJobs
  },
  localVue })