Jest单元测试el-input时调用wrapper.setValue()报错咨询

你遇到的报错来自几个核心问题：

• 你使用了shallowMount挂载组件，这个挂载方式不会递归渲染子组件，el-input作为Element UI封装的自定义组件，在shallow模式下会被替换为存根（stub），你通过find拿到的是组件根节点，不是内部的原生输入框元素，而setValue方法仅支持对原生表单元素、或完整渲染的支持v-model的组件调用，直接在存根组件上调用就会抛出你看到的错误。
• 你传入setValue的参数格式错误：你的el-input通过v-model绑定的是字符串类型的data.nombre，你传入了一个对象{nombre:'New value'}，参数类型完全不匹配。
• 额外的小问题：你的断言里预期值写的是'New Value'，和你要设置的'New value'大小写不一致，就算setValue执行成功，断言也会失败。

你可以根据自己的测试场景选下面任意一种方案：

方案1：使用mount挂载，操作内部原生input #

如果你需要模拟真实的用户输入行为，推荐用这个方式：

// 注意从@vue/test-utils导入mount
import { mount } from '@vue/test-utils'

it('Set value',async()=> {
    // 用mount替换shallowMount，保证el-input完整渲染
    const wrapper = mount(ModalNuevaCaja)
    // 匹配el-input内部的原生input元素
    const input = wrapper.find('[data-test="nombre_caja"] input')
    // setValue直接传入字符串值，不要传对象
    await input.setValue('New value')
    // 断言值匹配，注意大小写保持一致
    expect(input.element.value).toBe('New value')

    // 如果要测试blur触发校验逻辑，可以补充下面的代码
    // await input.trigger('blur')
    // 后续写校验提示相关的断言即可
})

方案2：保留shallowMount，通过组件事件触发更新 #

如果你只想快速验证v-model绑定逻辑，不需要渲染el-input内部结构，可以继续用shallowMount：

it('Set value',async()=> {
    const wrapper = shallowMount(ModalNuevaCaja)
    // 找到el-input对应的组件实例，而不是普通DOM节点
    const inputComponent = wrapper.findComponent('[data-test="nombre_caja"]')
    // 触发el-input的input事件，模拟值更新，对应v-model的绑定逻辑
    await inputComponent.vm.$emit('input', 'New value')
    // 直接断言组件实例上的绑定值是否正确
    expect(wrapper.vm.data.nombre).toBe('New value')
})

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