Vue2: при тестировании компонента, который содержит функциональный дочерний компонент, как передать событие от дочернего? - PullRequest
Новая
       6

Vue2: при тестировании компонента, который содержит функциональный дочерний компонент, как передать событие от дочернего?

0 голосов
/ 07 февраля 2019

Я пытаюсь выполнить модульное тестирование компонента, содержащего b-button (кнопка начальной загрузки).

Мне нужно вызвать событие «click», чтобы имитировать нажатие на дочерний компонент b-button, поскольку я используюshallowMount, так что все дочерние компоненты проверены, и я не могу .trigger('click') на нем.Кроме того, я не могу получить доступ к vm этого дочернего элемента, так как b-кнопка - это функциональные компоненты, у которых нет экземпляра, поэтому childWrapper.vm.$emit('click') также не будет работать.

Какой мой лучший вариант для тестированиямой компонент с shallowMount?

Что я пробовал:

  1. Использовал mount вместо shallowMount .trigger('click') будет делать работу
  2. Используется shallowMount и pass {stubs: {BButton}} bКнопка будет посмеяна с реальной реализацией и будет работать как секция 1
  3. Пробовал 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);
  });
});

1 Ответ

0 голосов
/ 09 июня 2019

Заглушите его обычной кнопкой для захвата события emit. 

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);
  });
...