Unable to trigger custom event

[gkatsanos]

Version

1.0.0-beta.29

Reproduction link

http://no-link
pasting code instead:

      <div class="journeys-dropdown-container">
        <tc-dropdown
          data-qe-id="journeys-dropdown"
          :mode="'select'"
          :options="dropdownElements"
          :placeholder-label="placeholderLabel"
          :theme="dropdownTheme"
          @input="changeTemplate">
        </tc-dropdown>
      </div>

  it('should change the charts when we select another template', async () => {
    const input = wrapper.find({ name: 'dropdown' });
    input.trigger('input', [122588]); // tried this
    wrapper.vm.$emit('input', 122588); // tried this as well
    await wrapper.vm.$nextTick();
    console.log(wrapper.vm);
    expect(wrapper.findAll('.box').length, 'boxes').to.equal(4);
  });

Steps to reproduce

I used .trigger to trigger an 'input' event for a custom child component I am testing. I need to pass a payload with an array of integers. (or just one integer). Do I use .trigger or wrapper.vm.$emit ? How can I debug this?

What is expected?

I used .trigger to trigger an 'input' event for a custom child component I am testing. I need to pass a payload with an array of integers. (or just one integer). Do I use .trigger or wrapper.vm.$emit ? How can I debug this?

What is actually happening?

The event isnt triggered correctly

other comments

The discord help channel is practically deserted. We beg for some help, I've been using vue-test-utils for 2 years, still in beta, and help is really scarce..

[ghost]

older issue on the topic: #145

[runarberg]

I managed to bypass this limitation by passing the event through in a stub:

<!-- "open" is a custom event triggered by watching -->
<!-- the `open` attribute on the wrapped dialog. -->
<DialogWrapper @open="doStuff" />

it('does stuff when dialog is opened', () => {
  const wrapper shallowMount(MyComponent, {
    stubs: {
      DialogWrapper: `<dialog @open="$emit('open')" />`,
    },
  });

  wrapper.trigger('open');

  // Assuming we have all spies set up.
  expect(wrapper.vm.doStuff).toHaveBeenCalled();
});

Note the stubs wrapper option. Just set it to any html tag and make sure it passes on which ever event you are testing:

<div @myEvent="$emit('myEvent')">

[dobromir-hristov]

Hey, I am sorry but from what I see, this should work? @lmiller1990 @JessicaSachs am I missing something here? Trigger works both on custom and native events.

[lmiller1990]

const input = wrapper.find({ name: 'dropdown' });
input.trigger('input', [122588]).vm.$emit; // this?

Should you be doing emit on the input you found?

Also join https://vue.land/ it is very active! There is a #testing channel.

[Stoom]

I've also had this issue. This, however, has worked for me

const input = wrapper.find('something-stub');
input.vm.$emit('foobar');