使用 vue-test-utils 测试两个不同的点击事件答案

【问题标题】：Testing two different click events with vue-test-utils使用 vue-test-utils 测试两个不同的点击事件
【发布时间】：2020-01-08 14:32:39
【问题描述】：

尝试测试两个不同按钮上的单击事件是否调用了两个方法。结果返回第二个事件的mock方法没有被调用。

模板如下（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>

这是我的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
})

我希望 searchJobs 和 resetFilter 都被调用，但是，只有第一个测试通过

有什么想法吗？

【问题讨论】：

标签： vue.js vue-test-utils

【解决方案1】：

resetFilter() 方法似乎没有正确存根。修改第二个测试如下：

  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()
  })

【讨论】：