这个问题让我很难过，我不明白如何让Vue测试工具和BootstrapVue一起玩得很好。
一个最小的例子如下：
MyComponent.vue
<template>
<div>
<b-button variant="primary" @click="play">PLAY</b-button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
methods: {
play() {
console.log("Let's play!");
}
}
}
</script>
在main.js中，我们使用BootstrapVue:Vue.use(BootstrapVue)。
这就是我试图测试click事件是否已触发的方式：
import { expect } from 'chai';
import sinon from 'sinon';
import Vue from 'vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import BootstrapVue, { BButton } from 'bootstrap-vue';
import MyComponent from '@/components/MyComponent.vue';
const localVue = createLocalVue();
localVue.use(BootstrapVue);
describe('MyComponent.vue', () => {
it('should call the method play when button is clicked', () => {
const playSpy = sinon.spy();
const wrapper = shallowMount(MyComponent, {
localVue,
methods: {
play: playSpy,
},
});
wrapper.find(BButton).trigger('click');
expect(playSpy.called).to.equal(true);
});
});
这给了我：
AssertionError: expected false to equal true + expected - actual -false +true
我用jest检查了如何在单元测试中测试引导vue组件的存在？，但不适用于CCD_ 5。
当运行测试时，我也没有在命令行上看到任何输出，我希望在命令行中执行这一行：
console.log("Let's play!");
这里怎么了？
click无法触发的原因是shallowMount与mount的工作方式不同。
正如我们所知，Vue Test Utils提供了两种方法来装载组件，即渲染模板和生成DOM树：
- 安装
- 浅丘
第一个方法mount生成一个完整的DOM树并遍历所有子组件。大多数情况下，这是不必要的，因此方法shallowMount是首选的——它将子组件截断在父组件下一级。
就我而言，这也是问题的根源BootstrapVue提供了BButton等组件，这些组件可以在您自己的Vue模板中使用。这意味着在以下模板中：
<template>
<div>
<b-button variant="primary" @click="play">PLAY</b-button>
</div>
</template>
b按钮是一个子组件，当在组件的单元测试中使用shallowMount时，它会被存根。这就是我们找不到元素按钮的原因：
const wrapper = shallowMount(MyComponent);
wrapper.find('button'); // won't work
我们可以找到这样的子组件：
wrapper.find(BButton); // BButton has to be imported from bootstrap-vue
但是如果我们试图输出渲染的元素：
console.log(wrapper.find(BButton).element);
我们会得到：
HTMLUnknownElement {}
作为子组件的BButton尚未完全呈现，DOM树中也没有button元素。但当我们使用mount时，我们会有这样的行为：
const wrapper = mount(MyComponent);
console.log(wrapper.find(BButton).element);
我们会得到：
HTMLButtonElement { _prevClass: 'btn btn-primary' }
我们看到mount已经渲染了子组件。当我们使用mount时，我们可以直接访问button元素：
wrapper.find('button');
既然我们有了button，我们就可以在上面触发类似click的事件
我希望这对其他初学者也有帮助。示例非常简单，不要忘记使用createLocalVue创建localVue，并将其传递给mount方法，如问题所示。
使用BootstrapVue时，请仔细考虑您需要哪种安装方法。
在执行shallowMount时，您应该能够执行以下操作：
wrapper.find(BButton).vm.$listeners.click();