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

Posted 2023-02-22

【中文标题】使用 vue-test-utils 测试两个不同的点击事件

【英文标题】：Testing two different click events with 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 都被调用，但是，只有第一个测试通过

有什么想法吗？

【参考方案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()
  )