vue.js - 如何测试包含 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>

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

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

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 方法，但找不到这样做的方法。

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

标签： vue.jsvuetify.jsvue-test-utils