Javascript 如何在BootstrapVue元素上使用Vue测试UTIL触发事件？

这个问题给我带来了困难，我不明白如何让Vue测试Utils和BootstrapVue一起玩得很好

最简单的示例如下所示：

wrapper.find(BButton); // BButton has to be imported from bootstrap-vue

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>

这给了我：

我选中了，但它不适用于

b按钮

在运行测试时，我在命令行上也看不到任何输出，我希望执行这一行：

console.log("Let's play!");

---

这里出了什么问题？

无法触发事件

单击

的原因是

浅装载

的工作方式与

装载

不同

众所周知，Vue Test UTIL提供了两种方法来装载组件，即呈现模板和生成DOM树：

• 坐骑
• 浅山

第一个方法

mount

生成一个完整的DOM树并遍历所有子组件。大多数情况下，这是不必要的，因此首选方法

shallowMount

——它将子组件存根到父组件下一级

就我而言，这也是问题的根源BootstrapVue提供组件，如

BButton

，可在您自己的Vue模板中使用。这意味着在以下模板中：

<template>
  <div>
    <b-button variant="primary" @click="play">PLAY</b-button>
  </div>
</template>

我们可以找到如下子组件：

wrapper.find(BButton); // BButton has to be imported from bootstrap-vue

但如果我们尝试输出渲染元素：

console.log(wrapper.find(BButton).element);

我们将得到：

HTMLUnknownElement {}

HTMLButtonElement { _prevClass: 'btn btn-primary' }

作为子组件的

BButton

尚未完全呈现，DOM树中没有

button

元素。但是当我们使用

mount

时，我们有以下行为：

const wrapper = mount(MyComponent);
console.log(wrapper.find(BButton).element);

我们将得到：

HTMLUnknownElement {}

HTMLButtonElement { _prevClass: 'btn btn-primary' }

我们看到

mount

已呈现子组件。当我们使用

mount

时，我们可以直接访问

按钮

元素：

wrapper.find('button');

现在我们有了

按钮

，我们可以触发一个事件，比如

点击它

我希望这对其他初学者也有帮助。示例非常简单，不要忘记使用
createLocalVue
创建
localVue
，并将其传递给
mount
方法，如问题所示

使用BootstrapVue时请仔细考虑所需的安装方法。
在执行
shallowMount时
您应该能够执行以下操作：

wrapper.find（BButton.vm.$listeners.click（）
要运行console.log，您可以尝试以下方法：wrapper.vm.play（）@lucas谢谢，但我的目标不是通过显式调用方法来运行
console.log
。我想测试触发
click
事件是否会调用该方法。明白了。但它有效吗？另一个选项是尝试将其更改为wrapper.find（'b-button'）。trigger（'click'））instead@lucas不，
wrapper.find（'b按钮'）
不起作用。无论是
wrapper.find（'button'）
都不会。在使用BoostrapVue时，必须将组件名称传递给
wrapper
的
find
方法。我不知道如何进一步触发事件。我不熟悉BootstrapVue，但我有一个想法可能会对您有所帮助。检查他们如何测试存储库中的按钮。希望它能给你一些启示。也适用于任何其他组件库（甚至您自己的子组件），而不仅仅是BootstrapVue@TroyMorehouse是的，你完全正确。这里我们以BootstrapVue为例，我相信它是一个流行的库。