title: How do I test a vue component that contains a v-text-field Vuetify child component?
body: <p>I have an "EditableText" component that displays regular text that when clicked converts into a vuetify v-text-input component (kind of like trello's functionality when you edit the title of a card).</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="editableText"&gt;
      &lt;div v-if="!editMode" @click="editMode = true" class="editableText__text" :class="textClass"&gt;
        {{ this.value }}
      &lt;/div&gt;
      &lt;v-text-field
        v-else
        class="editableText__input no-label"
        :class="textClass"
        :value="value"
        :autofocus="true"
        :height="20"
        :single-line="true"
        :hide-details="true"
        @input="handleInput"
        @blur="editMode = false"
      /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        editMode: false
      }
    },
  
    props: {
      value: {
        type: String,
        required: true
      },
      textClass: {
        type: String,
        default: ''
      }
    },
  
    methods: {
      handleInput(value) {
        this.$emit('input', value)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>All of my unit tests for this component are working fine except for when I try to confirm that the EditableText component emits an input event when the VTextField child component fires an input event.</p>
  
  <p>(most tests are omitted for length)</p>
  
  <pre><code>import Vue from 'vue'
  import { shallowMount } from '@vue/test-utils'
  import vuetify from 'vuetify'
  import EditableText from '@/components/EditableText'
  
  Vue.use(vuetify) // temporary until vuetify/createLocalVue bug is resolved
  
  const build = options =&gt; {
    return shallowMount(EditableText, options)
  }
  
  // Default props
  let options
  beforeEach(() =&gt; {
    options = {
      propsData: {
        value: 'Test value'
      }
    }
  })
  
  describe('EditableText', () =&gt; {
    it('emits an input event when the text input is changed', () =&gt; {
      const { VTextField } = Vue.options.components
      const wrapper = build(options)
      wrapper.find('.editableText__text').trigger('click') // need to click text to get VTextField to render
      wrapper.find(VTextField).trigger('input')
      expect(wrapper.emitted('input').length).toBe(1) // wrapper.emitted('input') is undefined
    })
  })
  </code></pre>
  
  <p>Unfortunately the wrapper never ends up emitting the input, even though the component works completely fine when testing in the browser.</p>
  
  <p>Is this something I should be testing and if so how should I go about testing that the EditableText component is emitting an input event properly? I've tried calling the handleInput method directly but couldn't find a way to do so.</p>
  
  <p>I'd also like to write a test that tests how it handles an input of an empty string. Is there a way to test an input event with a specific value?</p>