title: How to test if a component emits an event in Vue?
body: <p>I have two components. Child component emits an 'input' event when it's value changed and parent component takes this value with v-model. I'm testing ChildComponent. I need to write a test with Vue-test-utils to verify it works.</p>
  
  <p>ParentComponent.vue:</p>
  
  <pre><code>&lt;template&gt;
   &lt;div&gt;
    &lt;child-component v-model="search"&gt;&lt;/child-component&gt;
    &lt;other-component&gt;&lt;/other-component&gt;
    ...
   &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>ChildComponent.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;input :value="value" @change="notifyChange($event.target.value)"&gt;&lt;/input&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
    import { Component, Prop, Vue } from 'vue-property-decorator'
  
    @Component
    export default class ChildComponent extends Vue {
  
      @Prop({ default: '' }) readonly value!: string
  
      notifyChange(value: string) {
        this.$emit('input', value)
      }
  
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>child-component.spec.ts:</p>
  
  <pre><code>describe('ChildComponent', () =&gt; {
     let wrapper: any
     before(() =&gt; {
     wrapper = VueTestUtils.shallowMount(ChildComponent, {})
    })
  
     it(`Should emit 'input' event when value change`, () =&gt; {
      const rootWrapper = VueTestUtils.shallowMount(ParentComponent)
      wrapper.vm.value = 'Value'
      wrapper.findAll('input').at(0).trigger('change')
      assert.isTrue(!!rootWrapper.vm.search)
    })
  })
  </code></pre>
  
  <p>I didn't write the exact same code but the logic is like this.
  My components work properly. 'child-component.spec.ts' doesn't work. I need to write a test for it.</p>