Vue Test Utils + Сторонний компонент: не может обнаружить входное событие - PullRequest
Новая
       20

Vue Test Utils + Сторонний компонент: не может обнаружить входное событие

1 голос
/ 06 июля 2019

У меня проблема с обнаружением выброса события input при использовании стороннего компонента только при тестировании . Компонент ведет себя так, как и должно быть при тестировании в браузере. Используя расширение Vue, я также вижу, что оно правильно генерирует событие.

Я использую Выбор в качестве пользовательского выбора. 

Vue.component('choices', {
  props: ['options', 'value'],
  template: '#choices-template',
  mounted: function() {
    this.choicesInstance = new Choices(this.$refs.select);
    this.$refs.select.addEventListener('addItem', this.handleSelectChange);
    this.setChoices();
  },
  methods: {
    handleSelectChange(e) {
      this.$emit('input', e.target.value);
    },
    setChoices() {
      this.choicesInstance.setChoices(this.options, 'id', 'text', true);
    }
  },
  watch: {
    value: function(value) {
      console.log('input triggered: ' + value);
    },
    options: function(options) {
      // update options
      this.setChoices();
    }
  },
  destroyed: function() {
    this.choicesInstance.destroy();
  }
})

var vm = new Vue({
  el: '#el',
  template: '#demo-template',
  data: {
    selected: 2,
    options: [{
        id: 1,
        text: 'Hello'
      },
      {
        id: 2,
        text: 'World'
      }
    ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />

<div id="el"></div>

<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
  <div>
    <p>Selected: {{ selected }}</p>
    <choices :options="options" v-model="selected">
      <option disabled value="0">Select one</option>
    </choices>
  </div>
</script>

<script type="text/x-template" id="choices-template">
  <select ref="select">
    <slot></slot>
  </select>
</script>

Мой тестовый файл выглядит так (я использую Jest): 

import CustomSelect from '@/CustomSelect';
import { mount } from '@vue/test-utils';

let wrapper,
  options = [
    {
      key: 'Foo',
      value: 'foo',
    },
    {
      key: 'Bar',
      value: 'bar',
    },
    {
      key: 'Baz',
      value: 'baz',
    },
  ];

beforeEach(() => {
  wrapper = mount(CustomSelect, {
    propsData: {
      options,
    },
  });
});

it('Emits an `input` event when selection changes', () => {
  wrapper.vm.choicesInstance.setChoiceByValue([options[1].value]);
  expect(wrapper.emitted().input).not.toBeFalsy();
});
  • wrapper.emitted() всегда пустой объект для этого теста;
  • Если я выставляю choicesInstance из своего компонента в глобальном контексте и вручную вызываю choicesInstance.setChoiceByValue('1'), он корректно генерирует событие input.
...