title: Testing that a value is passed to a method that emits an event, Vue
body: <p>I have a Child component that renders buttons based on an array of objects passed as a prop. The
  value passed to the event handler is an object that looks like this: <code>{ boxes: 1, cookieQty: 4, id: 'chocChip-4', price: 12 }</code>.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ul class=&quot;list-items&quot;&gt;
        &lt;li v-for=&quot;(item, index) in items&quot; :key=&quot;item.id&quot;&gt;
          &lt;label :for=&quot;item.id&quot; class=&quot;label-btn-cookie&quot;&gt;{{ title }}&lt;/label&gt;
          &lt;button
            :id=&quot;item.cookieid&quot;
            v-bind=&quot;$attrs&quot;
            type=&quot;button&quot;
            :value=&quot;item.cookieQty&quot;
            class=&quot;cookie-buttons -shadow&quot;
            @click=&quot;updateSelection(item)&quot;
          &gt;
            ...
            ...
          &lt;/button&gt;
  
            methods: {
              updateSelection(value) {
                this.$emit(&quot;click&quot;, value);
               }
             }
  </code></pre>
  <p>In the Parent component, the Child looks like this and 'selectboxSize' takes the $event and then dispatches an action.</p>
  <pre class="lang-html prettyprint-override"><code>          &lt;CookieSelect
              :items=&quot;chocChipBoxSizesArray&quot;
              :title=&quot;chocChip&quot;
              data-cookie=&quot;chocolateChip&quot;
              @click=&quot;selectBoxSize($event)&quot;
            /&gt;
  
            ....
  
           selectBoxSize({ cookieQty }) {
            // map the element to an object and use that key to update state
            console.log(event);
            let element = event.currentTarget.getAttribute(&quot;data-cookie&quot;);
            this.updateBoxSize({ element, cookieQty });
  
  </code></pre>
  <p>Currently I have a passing test that verifies the button click emits an event. <strong>What I want to do is to test that 'updateSelection' is in fact called with the value passed.</strong></p>
  <pre><code>   const mockData = {
       items: chocChipBoxSizesArray,
       title: &quot;ChocolateChip&quot;
     };
  
     describe(&quot;CookieSelect&quot;, () =&gt; {
       const wrapper = shallowMount(CookieSelect, {
        localVue,
        propsData: { ...mockData }
       });
        it(&quot;emits click when clicked&quot;, () =&gt; {
         const value = { boxes: 1, cookieQty: 4, id: &quot;chocChip-4&quot;, price: 12 };
         wrapper.find(&quot;button&quot;).trigger(&quot;click&quot;);
         expect(wrapper.emitted(&quot;click&quot;)).toHaveLength(1); // passes
         expect(wrapper.emitted(&quot;click&quot;)).toHaveBeenCalledWith(value); // error
       });
  ...
  </code></pre>
  <p>This is the error I get:</p>
  <pre><code>expect(received).toHaveBeenCalledWith(...expected)
  
      Matcher error: received value must be a mock or spy function
  
      Received has type:  array
      Received has value: [[{&quot;boxes&quot;: 1, &quot;cookieQty&quot;: 4, &quot;id&quot;: &quot;chocChip-4&quot;, &quot;price&quot;: 12}]]
  </code></pre>
  <p>I've tried spies and mocking a new <code>MouseEvent()</code> to no avail.</p>