vue-test-utils测试<el-select>点击选项后value值未更新问题求助

问题根源分析 #

1. 单向数据流限制：Vue组件的props是单向传递的，你的el-select组件通过:value="value"绑定了props值，组件内部不会直接修改这个props，而是通过@input和@change事件通知父组件更新值，所以测试中直接查看props的value不会发生变化。
2. 错误的DOM元素取值：Element UI的el-select是自定义封装组件，并非原生<select>，直接访问element.value无法获取选中的选项值或标签文本，你看到的common.ativos_inativos其实是默认显示的第一个选项的标签。
3. 下拉菜单的挂载问题：默认情况下，el-select的下拉菜单会挂载到<body>上，而非组件内部，导致你的测试代码可能无法通过wrapper.findAll('.el-select-dropdown__item')找到选项元素。

修正后的测试代码 #

it('选择选项后正确触发事件并更新显示', async () => {
  // 初始化组件时挂载到body，确保下拉菜单能被wrapper捕获
  t.initWrapper({
    propsData: {
      value: ''
    },
    attachTo: document.body
  })
  
  // 触发下拉菜单打开
  await t.wrapper.find('#SelectAtivoInativo').trigger('click')
  await t.wrapper.vm.$nextTick()
  
  // 点击第二个选项（对应value="1"）
  await t.wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click')
  await t.wrapper.vm.$nextTick()

  // 验证组件是否正确触发input事件，传递的value为"1"
  expect(t.wrapper.emitted('input')[0]).toEqual(['1'])
  // 验证change事件是否正确触发
  expect(t.wrapper.emitted('change')[0]).toEqual(['1'])

  // 验证显示的标签文本是否为翻译后的"common.ativo"
  expect(t.wrapper.find('.el-select__label').text()).toBe(t.wrapper.vm.$t('common.ativo'))
})

关键修正点说明 #

• 挂载到body：添加attachTo: document.body确保下拉菜单被包含在测试wrapper的范围内，避免找不到选项元素的问题。
• 验证事件触发：通过wrapper.emitted('input')和wrapper.emitted('change')检查组件是否正确向外传递了选中值，这是测试自定义组件交互的正确方式。
• 正确获取显示文本：使用.el-select__label选择器获取el-select显示的标签文本，而非错误地访问element.value。

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