Test emitted event from child component

I would like to test that my component handles correctly events emitted by its child component.
How can I emit the event from child-component, without assuming anything about its implementation?
In the example below, how would I test an @input event emitted by child-component?

// ParentComponent
<template>
  <div>
    <child-component @input="handleMethod" />
  </div>
</template>

You can use @vue/test-utils.
Here is the particular usage you might need https://vue-test-utils.vuejs.org/api/wrapper/#trigger-eventtype-options

const stub = sinon.stub()
const wrapper = mount(ChildComponent, {
  listeners: { input: stub }
})
wrapper.trigger('input')
expect(stub.called).tobeTruthy()

Not sure I understand. My goal was to test the ParentComponent's behavior when the ChildComponent emits an @input event. It seems the use of the stub tests the Child rather than the parent.

Oh… I misunderstood your question. You can do this instead:

const stub = sinon.stub()
const wrapper = mount(ParentComponent)
 // just a simple assertion that your parent component's handler for input event was called
wrapper.setMethods({ methodToTest: sub })

// you can pass a component in `find()` method then trigger the component's event
wrapper.find(ChildComponent).trigger('input')

// assert if the listener was called
expect(stub.called).tobeTruthy()
2 Likes

What if I would like to trigger a custom event?