title: vue-test-utils: Vue child-component method "is not a function"
body: <p>In this test, I am simply trying to assert that the <code>end</code> property is set on the component under test (<code>DateRangeEditor</code>). The component assumes <code>this.$refs.datepicker</code> is an instance of <a href="https://krystalcampioni.github.io/vue-hotel-datepicker/" rel="nofollow noreferrer"><code>HotelDatepicker</code></a> and calls its <code>setCheckOut</code> and <code>setCheckIn</code> methods (if there is a better way to do this please let me know!).</p>
  
  <p>The component works when loaded normally in the browser, but my test for <code>setEndDate</code> is failing with "TypeError: this.$refs.datepicker.setCheckIn is not a function". </p>
  
  <p><strong>Am I misunderstanding what setting the <code>stubs</code> option is supposed to do?</strong> I thought scenarios like this, where the calling code just needs to call the stubbed function and doesn't need a specific result, were exactly what stubs are for. Am I just using it wrong?</p>
  
  <p>Here's my test:</p>
  
  <pre><code>import { mount, shallow } from 'vue-test-utils'
  import DateRangeEditor from '../../assets/src/components/DateRangeEditor.vue'
  
  describe('DateRangeEditor', () =&gt; {
  
    describe('@checkOutChanged', () =&gt; {
      it('sets a new end date', () =&gt; {
        const wrapper = shallow(DateRangeEditor, {
          stubs: ['datepicker']
        })
  
        // simulate user changing the end date
        const date = new Date(2017, 11, 1)
        wrapper.vm.$refs.datepicker.$emit('checkOutChanged', date)
  
        expect(wrapper.vm.end).to.equal(date)
      })
    })
  
    describe('@checkInChanged', () =&gt; {
      it('sets a new start date', () =&gt; {
        const wrapper = shallow(DateRangeEditor, {
          stubs: ['datepicker']
        })
  
        // simulate user changing the start date
        const date = new Date(2017, 11, 1)
        wrapper.vm.$refs.datepicker.$emit('checkInChanged', date)
  
        expect(wrapper.vm.start).to.equal(date)
      })
    })
  })
  </code></pre>
  
  <p>And here is my (greatly simplified) <code>DateRangeEditor</code> component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="date-range-editor-container"&gt;
      &lt;datepicker
        @checkInChanged="setStartDate"
        @checkOutChanged="setEndDate"
        ref="datepicker"
      &gt;&lt;/datepicker&gt;
      &lt;button type="button" @click="save" class="btn save-btn"&gt;Save&lt;/button&gt;
      &lt;button type="button" @click="cancel" class="btn cancel-btn"&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import HotelDatePicker from 'vue-hotel-datepicker'
  
  export default {
    methods: {
      setStartDate: function(newDate) {
        if (newDate) {
          // make sure newDate has an hour component
          newDate.setHours((new Date()).getHours())
          this.$refs.datepicker.setCheckIn(newDate)
          this.start = newDate
        }
      },
      setEndDate: function(newDate) {
        if (newDate) {
          // make sure newDate has an hour component
          newDate.setHours((new Date()).getHours())
          this.$refs.datepicker.setCheckOut(newDate)
          this.end = newDate
        }
      },
      save: function() {
        this.$emit('save', this.$data)
      },
      cancel: function() {
        this.$emit('cancel', this.$data)
      },
    },
    data: function() {
      return {
        start: '',
        end: '',
      }
    },
    components: {
      datepicker: HotelDatePicker,
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>Finally, here's my setup.js bootstrap file:</p>
  
  <pre><code>/* globals global */
  require('jsdom-global')()
  const chai    = require('chai')
  const sinon   = require('sinon')
  
  // use Sinon test spies/stubs/mocks in all tests
  chai.use(require('chai-sinon'))
  
  // expose libs to all tests
  global.chai     = chai
  global.sinon    = sinon
  global.expect   = chai.expect
  </code></pre>
  
  <h2>versions n stuff</h2>
  
  <ul>
  <li>@vue/test-utils ^1.0.0-beta.10</li>
  <li>vue ^2.4.4</li>
  </ul>