[ShallowMount] Cannot click on Vuetify icon when stubbing VIcon

[trollepierre]

Version

1.0.0-beta.24

Reproduction link

https://codesandbox.io/s/61jzxnovnk

Steps to reproduce

Trying to test click when using VIcon

I reproduce some scenarii :
it works when shallowMounting without using Vuetify, it works when mounting using Vuetify
I doesn't work when shallowMounting with Vuetify when selecting Component, by ref, by name

What is expected?

a way to trigger click on stub when shallowMount

What is actually happening?

it doesn't work

[tbsvttr]

Same problem here. I guess this is because Vuetify components are now seen as child components and stubs it therefore.

[trollepierre]

So the question is: "How could it be possible to trigger event on stubbed components?"

[eddyerburgh]

A temporary workaround is to stub the component manually:

const Stub = {
  template: '<div />'
}

const wrapper = shallowMount(TestComponent, {
  stubs: {
    'VIcon': Stub
  }
})

wrapper.find(Stub)

[gentksb]

I have same problem on <v-btn> & <v-textarea>.
My workaround is changing data same as click action.

[ferm10n]

@eddyerburgh is this what you were thinking for a workaround? https://codesandbox.io/s/42rxjjvz44
Not sure if I implemented your suggestion how you intended.

[trollepierre]

@eddyerburgh : to me, the issue is not fixed in beta 25.
On my CodeSandbox, I update VueTestUtils version 25, it doesn't solve anything

Are you sure, this issue is fixed?

[ElVisPL]

Confirming. v25 didn't fix stubs problem

@trollepierre did you find some solution with shallowMount?

[trollepierre]

No. I had to mount. :'(

@eddyerburgh is it possible to reopen this issue?

[p1pchenk0]

@eddyerburgh , thank you for your suggestion, but it does not help in the case, when there is a click handler passed as prop to parent component:

<div>
    I am parent
    <v-btn @click="callbackFromProp"></v-btn>
</div>

export default {
    props: {
        callbackFromProp: Function
    }
}

[eddyerburgh]

@p1pchenk0 In that case you need to supply a stub that calls the listener on the root element:

const wrapper = shallowMount(TestComponent, {
  stubs: {
    'v-icon': {
      template: '<div class="v-icon" @click="$listeners.click" />'
    }
  }
})

wrapper.find('.icon').trigger('click')

I don't think we should add all listeners to the auto stubs. With normal components we use the on value of the component that's being stubbed, but not all components expose this info.