title: Mocking $emit event of a child component in VueJS
body: <p>I have a snackbar component which I am writing tests for. It contains a child component (A button, when clicked closes the snackbar).</p>
  <p>This button emits a <code>@click</code> event which the parent listens to and runs a method to either close the snackbar or open another.</p>
  <p>Is there a way of mocking the <code>$emit</code>? I can't seem to find something anywhere related to this.</p>
  <pre><code>import { render, fireEvent, waitFor } from '@testing-library/vue';
  import Snackbar from '../Snackbar.vue';
  import EventBus from '@/services/EventBus';
  
  describe('Snackbar', () =&gt; {
      const role = 'alert';
      
      it('should close snackbar on button click', async () =&gt; {
          const type = 'success';
  
          const { getByRole } = render(Snackbar, {
              // with this the button is inaccessible
              stubs: ['OBButton'],
          });
  
          await EventBus.$emit('addSnack', {
              type,
          });
  
          const snackbar = getByRole('alert');
  
          // this is wrong...
          await fireEvent.click(button);
    
          // this expect should be appropriate.
          expect(snackbar).not.toBeInTheDocument;
      });
  });
  
  </code></pre>
  <p>This is the template of the component:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;snackbar-wrapper elevated&quot;&gt;
          &lt;transition name=&quot;snack-slide&quot; v-on:after-leave=&quot;checkForMoreSnacks&quot;&gt;
              &lt;div
                  role=&quot;alert&quot;
                  class=&quot;snack-data&quot;
                  v-if=&quot;currentSnack != null&quot;
              &gt;
                  &lt;span class=&quot;snack-text&quot;&gt;{{ currentSnack.text }}&lt;/span&gt;
                  &lt;OBButton
                      :text=&quot;currentSnack.buttonText&quot;
                      @click=&quot;closeCurrentSnack&quot;
                      :type=&quot;buttonType&quot;
                  &gt;&lt;/OBButton&gt;
              &lt;/div&gt;
          &lt;/transition&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Additional Info:</p>
  <ol>
  <li>This component is never unmounted. Closing it means setting the <code>currentSnack</code> value to <code>null</code> which hides it.</li>
  </ol>