如何在BootstrapVue元素上使用Vue Test Utils触发事件？ [英] How to trigger event with Vue Test Utils on a BootstrapVue element?

问题描述

这个问题使我很难受，我不明白如何使 Vue Test Utils 和 BootstrapVue 相互配合。

This issue gives me a hard time and I can't understand how to make Vue Test Utils and BootstrapVue play nice together.

一个最小的示例如下：

MyComponent.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>

在 main.js 中，我们使用 BootstrapVue ： Vue.use（BootstrapVue）。

这就是我正在尝试的方法测试是否触发了 click 事件：

This is how I'm trying to test that the click event has been triggered:

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

我检查了如何在单元测试中测试bootstrap vue组件的存在？，但不适用于 BButton 。

I checked How to test for the existance of a bootstrap vue component in unit tests with jest?, but it doesn't apply to BButton.

在运行测试时，我也不会在命令行中看不到任何输出，我希望可以在该行执行：

When running the test I also don't see any output on the command line, where I would expect this line to be executed:

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

这里出什么问题了？

推荐答案

无法触发事件 click 的原因是 shallowMount 的方式相对于 mount 起作用。

The reason why the event click couldn't be triggered is the way how shallowMount works in contrast to mount.

我们知道，Vue Test Utils提供了两种安装组件的方法，即渲染模板并生成DOM树：

As we know, Vue Test Utils provide two methods to mount a component, i.e. render the template and generate a DOM tree:

• mount


• shallowMount

第一种方法 mount 生成完整的DOM树并遍历所有子组件。在大多数情况下，这不是必需的，因此首选方法 shallowMount -将子组件存根到父组件下一层。

The first method mount generates a complete DOM tree and traverses through all child components. Most of the time this is not necessary, so the method shallowMount is preferred - it stubs the child components just one level below the parent component.

在我看来，这也是问题的根源。 BootstrapVue 提供了诸如 BButton 之类的组件，可以在自己的Vue模板中使用它们。这意味着在以下模板中：

In my case this was also the root of the problem. BootstrapVue provides components, like BButton, which can be used in your own Vue templates. That means that in the following template:

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

b按钮是一个子组件，使用时会存根我们组件的单元测试中的 shallowMount 。这就是为什么我们找不到元素按钮的原因：

the b-button is a child component, which is stubbed when using shallowMount in the unit tests for our component. That's the reason why we can't find an element button:

const wrapper = shallowMount(MyComponent);
wrapper.find('button'); // won't work

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

We can find the child component like this:

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

导入，但是如果我们尝试输出渲染的元素：

but if we try to output the rendered element:

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

我们将获得：

HTMLUnknownElement {}

BButton 作为子组件尚未完全呈现，并且DOM树中没有 button 元素。但是，当我们使用 mount 时，就会有以下行为：

The BButton as a child component hasn't been fully rendered and there is no button element in the DOM tree. But when we use mount we have this behaviour:

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

我们将获得：

HTMLButtonElement { _prevClass: 'btn btn-primary' }

mount 已呈现子组件。当我们使用 mount 时，我们可以直接访问 button 元素：

We see that mount has rendered the child component. When we use mount we can directly access the button element:

wrapper.find('button');

现在我们有了按钮触发类似 click 之类的事件。

Now that we have the button we can trigger an event like click on it.

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

I hope this helps other beginners too. The examples are very simplified, don't forget to create localVue using createLocalVue and pass it to the mount method as illustrated in the question.

在使用 BootstrapVue 时，请仔细考虑所需的安装方法

When using BootstrapVue think very carefully which mounting method you need.

这篇关于如何在BootstrapVue元素上使用Vue Test Utils触发事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！