chore(emitted): Add test case for emitted pass-through events

[freakzlike]

Test for #1509

This is only an issue, when the root component uses the pass-through (v-bind="$attrs"). Passing a function as prop onUpdate:modelValue does call the function but not record the emitted event. It seems that the event is not catched by devtools here:

test-utils/src/emit.ts

Lines 35 to 45 in 3cc95f9

	// devtools hook only catches Vue component custom events
	function createDevTools(events: Events): any {
	return {
	emit(eventType, ...payload) {
	if (eventType !== DevtoolsHooks.COMPONENT_EMIT) return
	const [_, componentVM, event, eventArgs] = payload
	recordEvent(componentVM, event, eventArgs)
	}
	} as Partial<typeof devtools>
	}

[netlify]

✅ Deploy Preview for vue-test-utils-docs ready!

Name	Link
🔨 Latest commit	a1fa662
🔍 Latest deploy log	https://app.netlify.com/sites/vue-test-utils-docs/deploys/629df803384d350008326455
😎 Deploy Preview	https://deploy-preview-1574--vue-test-utils-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[freakzlike]

Unfortunally I was still not able to find a solution for this. Anyone who wants to help with this can do so 😃

[cexbrayat]

I looked into it with the help of Guillaume (author of the devtools), and this is normal behavior, as there is no event emitted in that case.

So I think the way to test it would be to pass a listener in the props of mount:

it('captures pass through events', async () => {
    const BaseInput = defineComponent({
      props: {
        modelValue: String
      },
      emits: ['update:modelValue'],
      template: `<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`
    })

    const CustomInput = defineComponent({
      components: { BaseInput },
      template: `<BaseInput />`
    })

    let emitted = ''
    const wrapper = mount(CustomInput, {
      props: {
        modelValue: 'Text',
        'onUpdate:modelValue': (e) => (emitted = e)
      }
    })

    const input = wrapper.get('input')
    await input.setValue('New Text')

    const baseInput = wrapper.findComponent(BaseInput)
    expect(baseInput.emitted('update:modelValue')).toEqual([['New Text']])
    expect(emitted).toBe('New Text')
  })

I'll close this and the related issue