几天后,我明白使用vue-test-utils测试功能组件会引起一些问题
总而言之,我将Bootstrap-Vue的B-Button
与它的@click
事件一起使用,该事件调用了某些函数/方法。当我尝试运行测试以了解是否调用该方法时,测试失败。但是,当我将功能B-Button
与<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
})
expect(resetFilter).not.toHaveBeenCalled()
wrapper.find('#reset-button').trigger('click')
console.log(wrapper.find('#reset-button'))
expect(resetFilter).toHaveBeenCalled()
})
})
通过注释<b-button>
部分并注释<button>
,测试将失败,但是,如果测试能够通过,那就太好了,因为对于该项目,我们希望使用Bootstrap Vue。
有没有解决的想法,这不会带来测试的价值?例如,根据我问的一个较早的问题,功能组件不能很好地与指令一起使用,因此,通过使用非功能性存根,该指令可以正常工作,但是,这剥夺了测试的价值。
Use more than one directive to add data attributes to components
答案 0 :(得分:1)
据我了解,对此有两个答案。
使用shallowMount
时,应在创建包装器时对功能组件进行打桩。
另一种解决方案是使用mount
。仅当单独测试组件时,浅安装才真正好。在这里,我正在测试孩子...并且由于b-button是孩子组件...我需要将其放入