使用Vue-test-utils测试Vuetify：无法为v-text-field设置值

错误原因 #

你用wrapper.findComponent()获取到的是Vuetify的v-text-field组件实例，而setValue()方法仅支持原生表单元素（如<input>、<select>），不能直接在Vue组件实例上调用，因此触发报错。

解决方法 #

方法1：直接修改组件绑定的数据 #

通过组件实例直接修改v-model绑定的form.email，再验证输入框的值：

import Login from './login.vue'
import { shallowMount } from '@vue/test-utils'

describe('login', () => {
  it('sets email value correctly', async () => {
    const wrapper = shallowMount(Login)
    // 直接修改组件内部的绑定数据
    wrapper.vm.form.email = 'john@example.com'
    // 等待DOM更新（Vue 2/3都适用）
    await wrapper.vm.$nextTick()
    
    // 验证原生输入框的值是否同步更新
    const emailInput = wrapper.find('[test-id="input-email"] input')
    expect(emailInput.element.value).toBe('john@example.com')
  })
})

方法2：找到内部原生input调用setValue #

先定位到v-text-field组件，再找到其内部的原生<input>元素，调用setValue()：

import Login from './login.vue'
import { shallowMount } from '@vue/test-utils'

describe('login', () => {
  it('sets email value correctly', async () => {
    const wrapper = shallowMount(Login)
    // 先找到v-text-field组件，再定位内部原生input
    const emailInput = wrapper.find('[test-id="input-email"]').find('input')
    // 设置输入值
    await emailInput.setValue('john@example.com')
    
    // 验证组件绑定的数据是否同步更新
    expect(wrapper.vm.form.email).toBe('john@example.com')
  })
})

方法3：针对Vue 3的组件级setValue（推荐） #

如果使用Vue 3 + Vue Test Utils 2.x，可以直接在v-text-field组件实例上调用setValue()（框架会自动处理内部原生元素和事件），注意要配合async/await：

import Login from './login.vue'
import { shallowMount } from '@vue/test-utils'

describe('login', () => {
  it('sets email value correctly', async () => {
    const wrapper = shallowMount(Login)
    const emailField = wrapper.findComponent('[test-id="input-email"]')
    
    // 直接在组件上调用setValue，Vue Test Utils会自动处理内部逻辑
    await emailField.setValue('john@example.com')
    
    // 验证绑定数据是否更新
    expect(wrapper.vm.form.email).toBe('john@example.com')
  })
})

内容的提问来源于stack exchange，提问作者dust_bg