如何测试包含v-text-field Vuetify子组件的vue组件？

Question

我有一个“ EditableText”组件，该组件显示常规文本，单击该常规文本可将其转换为vuetify v-text-input组件（编辑卡标题时类似于trello的功能）。

<template>
  <div class="editableText">
    <div v-if="!editMode" @click="editMode = true" class="editableText__text" :class="textClass">
      {{ this.value }}
    </div>
    <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"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      editMode: false
    }
  },

  props: {
    value: {
      type: String,
      required: true
    },
    textClass: {
      type: String,
      default: ''
    }
  },

  methods: {
    handleInput(value) {
      this.$emit('input', value)
    }
  }
}
</script>

除了我试图确认当VTextField子组件触发输入事件时，EditableText组件发出输入事件之外，我对该组件的所有单元测试都工作正常。

（大多数测试都省略了长度）

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 => {
  return shallowMount(EditableText, options)
}

// Default props
let options
beforeEach(() => {
  options = {
    propsData: {
      value: 'Test value'
    }
  }
})

describe('EditableText', () => {
  it('emits an input event when the text input is changed', () => {
    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
  })
})

不幸的是，即使在浏览器中进行测试时组件完全可以正常工作，包装器也永远不会发出输入。

这是我应该测试的东西吗？如果是，我应该如何测试EditableText组件正确发出输入事件？我尝试直接调用handleInput方法，但是找不到方法。

我还想编写一个测试，测试它如何处理空字符串的输入。有没有一种方法可以测试具有特定值的输入事件？