Question

试图测试是否在两个不同按钮的click事件上调用了两个方法。结果返回未调用第二个事件的模拟方法。

模板如下（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，但是只有第一个测试通过了

有什么想法吗？

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

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

1 个答案: