title: Using Jest, how do I spyon an extended component's method when unit testing a single file component in vue.js
body: <p>I'm currently trying to get a single file component (<code>ComponentB</code>) unit tested using Jest and vue-test-utils. <code>ComponentB</code> extends <code>ComponentA</code>, which has a method <code>update(product)</code> defined in it.</p>
  
  <pre><code>/* -------- Component B -------- */
  &lt;script&gt;
  import ComponentA from './ComponentA'
  export default {
    extends: ComponentA,
    props: [...],
    data: () =&gt; {
      productData: {foo: 'bar', baz: 'shiz'}
    },
    methods: {
      updateProduct() {
        this.update(this.productData)
      }
    }
  }
  &lt;/script&gt;
  
  /* -------- Component A -------- */
  &lt;script&gt;
  export default {
    props: [...],
    data: () =&gt; {...},
    methods: {
      update(productData) {
        ...
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I then attempt a unit test in which I <code>shallowMount()</code> my <code>ComponentB</code> and try to <code>jest.spyOn</code> that <code>update(productData)</code> method that is defined in <code>ComponentA</code>. The test looks like this:</p>
  
  <pre><code>it('calls update with data when input is added to the field', () =&gt; {
    const spy = jest.spyOn(ComponentA, 'update);
    const wrapper = shallowMount(ComponentB, { propsData: { ... } });
    const contractIdInput = wrapper.find('#contract-id-input &gt; b-form-input');    
  
    contractIdInput.element.value = 'foobar';
    contractIdInput.trigger('input')
  
    expect(spy).toHaveBeenCalledWith(...someDataHere...)
  });
  </code></pre>
  
  <p>When I run this test, I get a <code>Cannot spy the update property because it is not a function; undefined given instead</code>.</p>
  
  <p>I'm not entirely sure why this isn't working, though I <em>do</em> have some ideas.</p>
  
  <p>First, because I am <code>shallowMount()</code>ing my <code>ComponentB</code>, it isn't going to know anything about its parent component, and thus not have access to the <code>update(productData)</code> method that is defined on <code>ComponentA</code>.</p>
  
  <p>Second, perhaps I'm not calling <code>jest.spyOn()</code> at the right time, and should instead call it after I create the wrapper object of <code>ComponentB</code>. However, I tried changing this around and didn't have any success or different behavior.</p>
  
  <p>So my question is, how do I spy on a method that is provided by an extended component when I am shallow mounting the component under test?</p>