Как вызвать событие с помощью Vue Test Utils для элемента BootstrapVue?

Эта проблема доставляет мне трудности, и я не могу понять, как заставить Vue Test Utils и 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

Я проверил, как проверить наличие компонента bootstrap vue в модульных тестах с помощью jest? , но это не относится к BButton.

При запуске теста я также не вижу вывода в командной строке, где я ожидал бы выполнения этой строки:

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>

б-кнопка является дочерним компонентом, который затушил при использовании 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дочерний компонент не был полностью отрисован, и buttonв дереве DOM нет элемента. Но когда мы используем, mountмы имеем такое поведение:

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

мы получим:

HTMLButtonElement { _prevClass: 'btn btn-primary' }

Мы видим, что mountотрисован дочерний компонент. Когда мы используем, mountмы можем напрямую обращаться к buttonэлементу:

wrapper.find('button');

Теперь, когда у нас есть, buttonмы можем вызвать событие, подобное clickэтому.

Надеюсь, это поможет и другим новичкам. Примеры очень упрощены, не забудьте создать localVueusing createLocalVueи передать его mountметоду, как показано в вопросе.

При использовании BootstrapVue очень тщательно подумайте, какой способ монтажа вам нужен.

Продолжая выполнять, shallowMountвы должны уметь это делать:

wrapper.find(BButton).vm.$listeners.click();