如何测试Vuetify中v-text-field的绑定值与UI显示内容

核心问题根源 #

• 组件挂载后立刻读取DOM值，没有等待Vue异步响应式更新完成：mounted钩子中给timeData赋值的操作会触发DOM更新，这个过程是异步的，同步读取时赋值还没生效，所以input的value为空
• 原生type="time"的input元素特性：其显示的12小时制文本是浏览器根据系统区域设置渲染的，不会直接暴露在input的innerHTML中，且原生DOM对象没有html()方法，你之前的写法调用了不存在的方法才会报错
• Vuetify的v-text-field封装逻辑：格式化后的显示内容是挂载在组件外层的，不需要从内层input读取

修复步骤 #

1. 修改测试用例 #

给测试用例加异步等待逻辑，调整取值逻辑，修改后代码如下：

// time.spec.js 完整修改后的第二个测试用例
test('display provided time value', async () => {
  const wrapper = mount(TimeComponent, {
    localVue,
    propsData: {
      label: 'Start Time',
      value: '11:53'
    }
  });
  // 等待Vue完成所有DOM更新
  await wrapper.vm.$nextTick();
  
  const textField = wrapper.findComponent({name:'v-text-field'});
  const inputElement = textField.find('input').element;

  // 验证底层24小时制绑定值正常
  expect(inputElement.value).toContain('11:53');
  // 验证组件渲染的文本包含12小时制显示内容
  expect(textField.text()).toContain('11:53 AM');
})

2. 可选组件优化（避免后续父组件传值变更不更新的问题） #

给组件添加value属性的监听器，保证父组件动态修改value时子组件可以同步更新：

// time.vue的script中添加watch配置
export default {
  // 原有配置不变
  watch: {
    value(newVal) {
      this.timeData = newVal;
    }
  }
}

额外注意事项 #

如果测试环境的默认区域设置为24小时制导致12小时格式显示异常，可以在测试启动时配置浏览器区域，或者直接读取v-text-field的内部格式化属性textField.vm.internalValue验证内容即可。

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