Can't trigger event of child component

[CzBiX]

Version

1.0.0-beta.29

Reproduction link

https://codesandbox.io/s/ecstatic-moser-b402n

Steps to reproduce

Run test with npx vue-cli-service test:unit.

What is expected?

Test passed.

What is actually happening?

Test failed.

[lmiller1990]

The reproduction sandbox isn't running for me - complaining about Jest and It been undefined.

Can you try using await/async and await nextTick? Eg:

it("demo without stub", async () => {
  const cb = jest.fn();

  const wrapper = mount(Demo, {
    localVue,
    stubs: {
      Dummy: false
    }
  });

  wrapper.setData({
    cb
  });

  console.log(wrapper.html());
  wrapper.find("div").trigger("input");
  // or
  wrapper.find("div").vm.$emit("input");
  await wrapper.vm.$nextTick()

  expect(cb).toBeCalled();
});

And see if that works

[CzBiX]

Yes, codesandbox broken for @vue/vue-test-utils or jest. You can export it to local and test.
I tried upgrade to 1.0.0-beta.30 and use nextTick, but issue still exists.

I debugged it, found wrapper.trigger method only trigger DOM event, so it's not working for component.
And wrapper.find('div').vm will return root Vue instance(wrapper.vm === wrapper.find('div').vm), so wrapper.find('div').vm.$emit not working neither.

[dobromir-hristov]

Try find({ ref: 'some-ref' }) and tell me if it works :) I may know the reason why 😄

[lmiller1990]

I wasn't thinking when I posted - it should it be wrapper.find(Demo).vm.$emit("input"), I think.

I tried Export to ZIP but nothing happened. I can create a template this evening and try this out.

[CzBiX]

I tried find({ ref: 'some-ref' }).trigger('input') and find(Demo).vm.$emit('input'), still no luck.

[lmiller1990]

Weird, I'll give this a look this evening.

[CzBiX]

Sorry, I forget about trigger only trigger DOM event.
I correct it to find({ ref: 'some-ref' }).vm.$emit('input'), then it works w/wo stubs.

Is this a bug or my incorrect usage? I'm not sure.

Maybe we should point it out in docs:
"You can get child component vm instance via find by ref."
"Triggers an DOM event asynchronously…"

[lmiller1990]

You should not need to use ref - @dobromir-hristov seems to have some info around this.

[aldarund]

isnt it same as #1385 ?

[lmiller1990]

I think you could be right @aldarund.

@CzBiX are you able to share your exact use case for this functionality with some more context?

I'm starting to think instead of attempting to fix/cover every edge case for using find (we have ref, querySelector, component, and there are some that appear very hard or impossible to solve as expected in #1385), we should start providing best practices and guides to writing tests with VTU so people don't need to resort to things like find({ ref: 'ref' }).vm.$emit('event'), which doesn't at all reflect something a user would be able to do.

[CzBiX]

I'm using Vuetify, which provide v-btn component. And I want to write test for click button action.

Add ref in src only for unit test is hacky to me.
Right now, I have to wrap something like <v-btn @input="someValue = !someValue" /> to <v-btn @input="clickBtn" />, then I can just call wrapper.vm.clickBtn() to test button events.

@aldarund In my use case child component is not the root component.

[lmiller1990]

I see. This is a pretty common use case (testing Vuetify).

I use this approach in my Vuetify apps (and when people ask for help with testing Vuetify).

Component:

<template>
  <div>
    <div id="count">
      Count: {{ count }}
    </div>
    <v-btn data-test-btn @click="handleInput">Ok</v-btn>
  </div>
</template>

<script>
export default {
  name: 'App',

  methods: {
    handleInput() { 
      this.count++ 
    }
  },

  data: () => ({
    count: 0
  }),
};
</script>

Test:

import { mount, createLocalVue } from '@vue/test-utils'
import Vuetify from 'vuetify'

import App from '@/App.vue'

describe('', () => {
  it('renders props.msg when passed', async () => {
    const localVue = createLocalVue()
    localVue.use(Vuetify)
    const vuetify = new Vuetify()
    const wrapper = mount(App, {
      localVue,
      vuetify
    })

    wrapper.find('[data-test-btn]').find('button').trigger('click')
    await wrapper.vm.$nextTick()
    expect(wrapper.find('#count').text()).toBe('Count: 1')
  })
})

I added a data-test attribute to make it easier to find my <v-btn>. Then I just chain find again to find the <button> Vuetify wraps.

I am not sure if this solution is ideal for every case, but I've found it pretty good. The reason I like it is because you do not need to use .vm, just basic things like find and trigger.

Anyway, we will still try out best to fix all the trigger and find bugs, but this might be useful to you as well. Thanks for the feedback and useful bug reports, it's clear that we need better tooling for testing Vuetify and other third party libs. I'll take this on board in planning for VTU 1.0, and Vue 3 support :)

[aldarund]

@CzBiX but in your provided CBS in Demo.vue and test you are testing the root component . How its not the root?