测试功能组件内单击事件的函数/方法调用 [英] Testing for a function/method call on click event inside a functional component

问题描述

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

After a number of days hitting a wall, I understood that testing functional components with vue-test-utils causes some issues

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

To summarize, I am using Bootstrap-Vue's B-Button with a @click event on it that calls some function/method. When I try to run a test to understand whether the method is called, the test fails. However, when I swap the functional B-Buttonwith a <button> the test passes.

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

通过注释掉 部分并注释

测试失败，但是，如果它可以通过就很好了，因为对于这个项目，我们想使用 Bootstrap Vue.

By commenting out the <b-button> part and commenting the <button> the test fails, however, it will be nice if it can pass since for this project we would like to use Bootstrap Vue.

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

Any ideas for a work around, which would not take away the value of the test? For example, according to an earlier question I asked, functional components don't operate well with directives, hence by using a non-functional stub the directive works fine, however, this takes away the value of the test.

使用多个指令添加组件的数据属性

推荐答案

据我所知，对此有两个答案.

As far as I understood there are two answers to this.

当使用 shallowMount 时，函数组件应该在创建包装器时被存根.

When using shallowMount the functional components should be stubbed when creating the wrapper.

另一种解决方案是使用mount.只有在单独测试组件时，浅安装才真正有用.在这里，我正在测试儿童......并且由于 b-button 是一个子组件......我需要将其引入

The other solution is to use mount. Shallow mount is really only good when only the component is tested in isolation. Here I am testing children... and since b-button is a child component... I need to bring it in

这篇关于测试功能组件内单击事件的函数/方法调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！