使用Jest测试Vue子组件的输入字段

我太懂你这个困扰了——直接设置子组件的model没生效，这在Vue测试里是个挺常见的坑，毕竟Vue的响应式系统和组件封装特性，直接改子组件内部属性根本触发不了更新逻辑。下面给你几个我平时测试常用的靠谱方案：

1. 模拟真实用户操作（最推荐） #

测试的核心就是贴近真实用户行为，所以直接操作DOM输入框是最稳妥的方式。Vue Test Utils提供的setValue方法，能直接给输入框赋值还自动触发对应事件：

import { mount } from '@vue/test-utils'
import YourParentComponent from '@/components/YourParentComponent.vue'

test('子组件输入框赋值测试', async () => {
  const wrapper = mount(YourParentComponent)
  
  // 推荐用data-testid定位元素，就算DOM结构变了测试也不容易崩
  const inputElement = wrapper.find('[data-testid="child-input"]')
  
  // 设置输入值，setValue会自动触发input事件，同步更新v-model绑定的值
  await inputElement.setValue('你要测试的内容')
  
  // 断言父组件绑定的值是否正确更新，或者子组件的显示是否符合预期
  expect(wrapper.vm.parentBoundValue).toBe('你要测试的内容')
})

记得给子组件的input加个data-testid属性，比如：<input data-testid="child-input" v-model="localValue" />，这样定位更精准。

2. 针对自定义输入组件：触发input事件 #

如果你的子组件是封装过的自定义输入组件（比如<CustomInput v-model="parentValue" />），找原生input可能麻烦，这时候可以直接触发子组件的input事件——毕竟v-model本质就是绑定value+监听input事件的语法糖：

import { mount } from '@vue/test-utils'
import YourParentComponent from '@/components/YourParentComponent.vue'
import CustomInput from '@/components/CustomInput.vue'

test('自定义子组件输入测试', async () => {
  const wrapper = mount(YourParentComponent)
  
  // 找到自定义子组件实例
  const customInput = wrapper.findComponent(CustomInput)
  
  // 触发input事件并传入测试值
  await customInput.vm.$emit('input', '通过事件设置的值')
  
  // 断言父组件的值是否更新
  expect(wrapper.vm.parentValue).toBe('通过事件设置的值')
})

3. 旧版本Vue Test Utils兼容方案 #

如果你用的是Vue Test Utils 1.x版本，setValue需要手动触发事件，写法会稍微繁琐一点：

const input = wrapper.find('[data-testid="child-input"]').element
input.value = '测试值'
// 手动触发input事件
input.dispatchEvent(new Event('input'))
// 等待Vue更新DOM和响应式数据
await wrapper.vm.$nextTick()

// 然后进行断言
expect(wrapper.vm.parentBoundValue).toBe('测试值')

几个避坑提醒 #

• 别直接修改子组件内部属性：比如wrapper.findComponent(CustomInput).vm.localValue = 'xxx'，这种方式绕开了Vue的响应式系统，测试肯定不会生效。
• 区分shallowMount和mount：如果用shallowMount，子组件会被 stub，这时候没法测试子组件的真实输入行为，要么换成mount，要么在shallowMount配置里指定不 stub 目标子组件。

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