我尝试对包含b-button
的组件进行单元测试(引导 vue 按钮(。
我需要发出一个"click"事件来模拟对 b 按钮子组件的点击,因为我使用 shallowMount,所以所有子组件都被模拟,我无法.trigger('click')
它。此外,我无法访问该孩子的 vm,因为 b 按钮是一个没有实例的功能组件,因此childWrapper.vm.$emit('click')
也不起作用。
使用 shallowMount 测试组件的最佳选择是什么?
我尝试过:
- 使用装载而不是浅装载
.trigger('click')
可以完成这项工作 - 使用浅挂载和传递
{stubs: {BButton}}
b 按钮将在实际实现中被模拟,并将作为第 1 节工作 - 尝试了
btnWrapper.trigger('click')
,btnWrapper.vm.$emit('click')
,btnWrapper.element.click()
,它们都没有奏效。
// TemplateComponent.vue
<template>
<div class="row">
<div class="col-12 p-2">
<b-button @click="eatMe">Eat me</b-button>
</div>
</div>
</template>
<script>
import bButton from 'bootstrap-vue/es/components/button/button';
export default {
name: "TemplateComponent",
components: {
bButton
},
methods: {
eatMe() {
this.$emit('click')
}
}
}
</script>
// TemplateComponent.test.js
import {shallowMount} from '@vue/test-utils';
import TemplateComponent from './TemplateComponent.vue';
describe('TemplateComponent', () => {
let wrapper, vm;
beforeEach(() => {
wrapper = shallowMount(TemplateComponent);
});
it('should trigger the eatMe twice', () => {
wrapper.setMethods({
eatMe: jest.fn()
});
const btn = wrapper.find('b-button-stub');
btn.trigger('click'); // won't work
btn.vm.$emit('click'); // won't work
expect(vm.eatMe.mock.calls.length).toEqual(2);
});
});
使用常规按钮将其存根以捕获发出事件。
describe('TemplateComponent', () => {
let wrapper, vm;
beforeEach(() => {
shallowMount(TemplateComponent, {
stubs: {
'b-button': {
template: `<button @click='$listeners.click'></button>`
}
}
});
it('should trigger the eatMe twice', () => {
wrapper.setMethods({
eatMe: jest.fn()
});
const btn = wrapper.find('whatever');
btn.trigger('click'); // will now work. as it's swapped with a generic button, still processing the event.
expect(vm.eatMe.mock.calls.length).toEqual(2);
});