Testing two different click events with vue-test-utils

Question

Trying to test whether two methods are called on a click event on two different buttons. The result returns that the mock method on the second event is not called.

The template is the following (JobsSearch.vue):

<template>
    <b-input-group class="sm-2 mb-2 mt-2">
      <b-form-input
        :value="this.searchConfig.Keyword"
        @input="this.updateJobsSearchConfig"
        class="mr-2 rounded-0"
        placeholder="Enter Search term..."
      />
      <b-button
        @click="searchJobs"
        class="rounded-0 search-button"
        variant="primary"
      >
        Search
      </b-button>
      <b-button
        @click="resetFilter"
        class="rounded-0 ml-2 reset-button"
        variant="primary"
      >
        Reset
      </b-button>
    </b-input-group>
</template>

This is my JobsSearch.spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
// BootstrapVue is necessary to recognize the custom HTML elements
import BootstrapVue from 'bootstrap-vue'
import JobsSearch from '@/components/jobs/JobsSearch.vue'

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

describe('JobsSearch.vue', () => {
  let state
  let store
  let wrapper
  let searchJobs
  let resetFilter
  let emitEvents

  beforeEach(() => {
    state = {
      jobs: {
        paged: {
          size: 100,
          page: 1
        },
        search: {
          Keyword: '',
          status: [],
          ucode: []
        }
      }
    }

    store = new Vuex.Store({
      state
    })

    searchJobs = jest.fn()
    resetFilter = jest.fn()
    emitEvents = jest.fn()

    wrapper = shallowMount(JobsSearch, {
      methods: {
        searchJobs,
        resetFilter,
        emitEvents
      },
      localVue,
      store })
  })

  afterEach(() => {
    wrapper.destroy()
  })


  // START: Method tests

  it('should call jobsSearch method on search button click event', () => {
    wrapper.find('.search-button').trigger('click')
    expect(searchJobs).toHaveBeenCalled()
  })

  it('should call resetFilter method on reset button click event', () => {
    wrapper.find('.reset-button').trigger('click')
    expect(resetFilter).toHaveBeenCalled()
  })
  // END: Method tests
})

I expect both searchJobs and resetFilter to be called, however, only the first test passes

Any ideas, please?

Simon Thiel · Accepted Answer · 2019-10-16 13:52:14Z

0

It seems like that the resetFilter() method is not stubbed correctly. Adapt the second test as follows:

  it('should call resetFilter method on reset button click event', () => {
    const resetFilterStub = jest.fn();
    wrapper.setMethods({ resetFilter: resetFilterStub });
    wrapper.find('.reset-button').trigger('click')
    expect(resetFilter).toHaveBeenCalled()
  })

answered Oct 16, 2019 at 13:52

Simon Thiel

3,3356 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing two different click events with vue-test-utils

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related