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

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

总而言之，我使用的是Bootstrap Vue的B按钮，上面有一个@click事件，它调用一些函数/方法。当我试图运行测试以了解是否调用了该方法时，测试失败。但是，当我用a交换功能B按钮时，测试通过

这里是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>

然而，通过注释掉部分和注释测试失败，如果它能够通过就好了，因为对于这个项目，我们希望使用Bootstrap Vue

有没有关于变通方法的想法，这不会影响测试的价值？例如，根据我之前提出的一个问题，功能组件不能很好地与指令一起运行，因此通过使用非功能存根，指令可以正常工作，但是，这会带走测试的价值

---

据我所知，有两个答案

当使用shallowMount时，在创建包装器时，功能组件应该是存根的

---

另一种解决方案是使用mount。只有在隔离测试组件时，浅安装才是真正好的。我在这里测试孩子们。。。由于b按钮是一个子组件。。。我需要把它带进来

你试过用标签把b按钮包起来吗？@Skyentao我没有特别试过，但我试过把b按钮钉在shallowMount里面，效果很好。然而，我随后在Vue Land Discord频道与某人交谈，他建议不要使用shallowMount。只有当你测试一个组件而不是任何子组件时，浅装才是真正好的。。。由于b按钮是一个子组件。。。我需要把它带进来你可以开始用boostrap vue样板来处理这个案子

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
    })
    expect(resetFilter).not.toHaveBeenCalled()
    wrapper.find('#reset-button').trigger('click')
    console.log(wrapper.find('#reset-button'))
    expect(resetFilter).toHaveBeenCalled()
  })
})