title: Vue.js test:unit with test-utils and Jest : Nested component -Is it possible to mock the $emit(function) from child component?
body: <p>Given nested components</p>
  
  <p>the Heading.vue component
           
              {{ $t("lang.views.home.heading.btn__listen") }}
                play_arrow
              
              
                
              
           </p>
  
  <p>The nested child component AuioPlayer.vue</p>
  
  <pre><code>     &lt;template&gt;
         &lt;div style="display: inline-block;"&gt;
           &lt;v-btn id="playPauseBtn"&gt;
             ...
           &lt;/v-btn&gt;
           &lt;v-btn id="stopBtn" outline icon class="inline teal--text" @click.native="stop()"&gt;
             &lt;v-icon&gt;stop&lt;/v-icon&gt;
           &lt;/v-btn&gt;
           &lt;v-btn id="muteBtn"&gt;
             ...
           &lt;/v-btn&gt;&gt;
         &lt;/div&gt;
       &lt;/template&gt;
  
   &lt;script&gt;
      ...
       methods: {
              stop() {
                  this.$data._howl.stop();
                  this.$emit("playerStop");
              },
       ...
   &lt;/script&gt;
  </code></pre>
  
  <p>Is it possible to test the parent Heading.vue , using shallowMount() mocking the $emit("playerStop") event ... ?</p>
  
  <pre><code>     it("should display LISTEN button on child component audioplayer event stop()", () =&gt; {
         // given
         wrapper = shallowMount(Heading, { router, i18n });
         wrapper.vm.listening = true;
         // when
         // audioplayer child component should be stubbed
         const audioplayer = wrapper.find('#audioplayer');
         console.log(audioplayer.html());
         // mock the $emit(playerStop) from the child audioplayer stub
         expect(wrapper.vm.listening).toBe(false);
       });
  </code></pre>
  
  <p>UPDATE </p>
  
  <p>I trued 2 solutions without any success</p>
  
  <p>1 / using a spy function</p>
  
  <pre><code>it("should display LISTEN button on child component audioplayer event stop()", () =&gt; {
    // given
    wrapper = shallowMount(Heading, { router, i18n });
    const spy = jest.fn();
    // wrapper.vm.$on('stopPlayer', spy);  // focus on the call of listener
    wrapper.setData({ listening: true });
    const audioplayer = wrapper.find('audioplayer-stub');
    // when
    audioplayer.trigger('stopPlayer');
    // then
    expect(spy).toHaveBeenCalledTimes(1);
    expect(wrapper.vm.listening).toBe(false);
  });
  </code></pre>
  
  <p>2 / Using an async $emit() </p>
  
  <pre><code>it("should display LISTEN button on child component audioplayer event stop()", async () =&gt; {
    // given
    wrapper = shallowMount(Heading, { router, i18n });
    wrapper.setData({ listening: true });
    const audioplayer = wrapper.find('audioplayer-stub');
    // when
    audioplayer.vm.$emit('stopPlayer');
    await wrapper.vm.$nextTick();
    // then
    expect(wrapper.vm.listening).toBe(false);
  });
  </code></pre>
  
  <p>In both cases it seems that if I trigger or emit from the sub-component nothing happen...<br>
  As a matter of fact, the emit() should be done from a stop button in the sub-component which is not stubbed at this level ..
  Is there anyway to stub it ? 
  I want to avoid a mount ... using shallowMount should be sufficient at this level of tets ...</p>
  
  <p>thanks for feedback</p>