Vue-test-utils: Click event not triggered on component with @click.native

[karlitos]

Version

1.0.0-beta.11

Reproduction link

https://codesandbox.io/s/3kqlp1p1rq

Steps to reproduce

Add an @click.native="myMethod()" to an component.

Create a test where you mount this component:

const wrapper = shallow(MainContainer, { // shallow or mount, no difference
        localVue,
        store,
});

Try to trigger an click event on this component.

wrapper.find('some valid selector').trigger('click'); // trigger('click.native') makes no difference

What is expected?

myMethod is being called

What is actually happening?

myMethod is not called

---

It works perfectly with @click="myMethod()", so i currently use both as a workaround, @click.native is trigered in browser, @click works in tests. I used Vuetify in the example with an click-binding on the card component.

[eddyerburgh]

The problem is that v-card isn't registered as a component. That means there's no DOM node for the event to be added to. You can fix this in two ways:

With mount, by installing Vuetify to register the component:

const clickHandler = sinon.stub()
const localVue = createLocalVue()
const VCard = {
  render: h => h('div'),
  name: 'v-card'
}
localVue.use(Vuetify)
const wrapper = mountingMethod(TestComponent, {
  propsData: { clickHandler },
  localVue,
})
wrapper.find({name:'v-card'}).trigger('click')
expect(clickHandler.calledOnce).to.equal(true)

With shallow, by passing a stub:

const TestComponent = {
  template: `<v-card @click.native="clickHandler"/>`,
  props: ['clickHandler']
}
const clickHandler = sinon.stub()
const VCard = {
  render: h => h('div'),
  name: 'v-card'
}
const wrapper = mountingMethod(TestComponent, {
  propsData: { clickHandler },
  stubs: {
    VCard
  }
})
wrapper.find(VCard).trigger('click')

expect(clickHandler.calledOnce).to.equal(true)