测试功能组件内单击事件的函数/方法调用

Question

碰壁几天后，我了解到使用 vue-test-utils 测试功能组件会导致一些问题

总而言之，我正在使用 Bootstrap-VueB-Button和一个@click调用一些函数/方法的事件。当我尝试运行测试以了解是否调用了该方法时，测试失败。但是，当我B-Button用 a交换功能时<button>，测试通过了。

这是JobSearch.vue组件

<template>

  <b-input-group>

    <b-form-input

      class="mr-2 rounded-0"

      placeholder="Enter Search term..."

      id="input-keyword"

    />

<!--    <b-button-->

<!--      @click="searchJobs"-->

<!--      class="rounded-0 ml-2"-->

<!--      variant="primary"-->

<!--      id="reset-button"-->

<!--    >-->

<!--      Reset-->

<!--    </b-button>-->

    <button

      @click="resetFilter"

      class="rounded-0 ml-2"

      id="reset-button">

      Reset

    </button>

  </b-input-group>

</template>

<script>

export default {

  name: 'job-search-test',

  methods: {

    async searchJobs () {

      console.log('Calling Search Jobs from JobsSearchTest')

    },

    resetFilter () {

      console.log('Clicked On Reset')

    }

  },

  mounted () {

    // this.searchJobs()

  }

}

</script>

这是 JobSearch.spec.js

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)

  })

  it('should call resetFilter method on reset button click event', () => {

    let resetFilter = jest.fn()

    const wrapper = shallowMount(JobSearchTest, {

      methods: {

        resetFilter

      },

      localVue

    })

  })

})

但是，通过注释掉该<b-button>部分并注释<button>测试失败，如果它可以通过就太好了，因为对于这个项目，我们希望使用 Bootstrap Vue。

任何解决方法的想法都不会消除测试的价值？例如，根据我之前提出的一个问题，功能组件不能很好地与指令一起运行，因此通过使用非功能存根，指令可以正常工作，但是，这会带走测试的价值。