Vue3+Vuetify项目中Vitest测试v-form验证失效问题

针对你遇到的表单验证测试不通过、提交按钮始终禁用的问题，结合v-radio-group的特性，可按以下步骤排查解决：

1. 确认v-radio-group的绑定与测试交互逻辑 #

Vuetify的v-radio-group是封装组件，不会直接给原生<input>添加checked或selected属性，内部状态通过v-model维护。测试时不要断言原生DOM属性，应通过组件的v-model值或表单验证状态判断。

测试中选择单选按钮时，需模拟真实用户交互触发组件状态更新：

• 给v-radio添加data-testid属性方便定位
• 调用trigger('click')后，必须等待异步更新完成（用await flushPromises()而非仅$nextTick()）

2. 手动触发表单验证 #

Vuetify的v-form在测试环境中可能不会自动触发实时验证，即使字段已填充，需手动调用表单的validate()方法（确保表单有ref绑定），并等待验证完成的异步操作。

3. 修正后的测试代码示例 #

假设你的组件关键结构如下：

<template>
  <v-form ref="form" v-model="isFormValid">
    <v-text-field 
      data-testid="name-input"
      v-model="formData.name" 
      :rules="[v => !!v || '名称必填']" 
      label="名称"
    ></v-text-field>
    <v-radio-group 
      data-testid="option-group"
      v-model="formData.selectedOption" 
      :rules="[v => !!v || '请选择选项']" 
      label="选项"
    >
      <v-radio data-testid="option-1" label="选项1" value="1"></v-radio>
      <v-radio data-testid="option-2" label="选项2" value="2"></v-radio>
    </v-radio-group>
    <v-btn data-testid="submit-btn" :disabled="!isFormValid" type="submit">提交</v-btn>
  </v-form>
</template>

<script setup>
import { ref } from 'vue'
const form = ref(null)
const isFormValid = ref(false)
const formData = ref({
  name: '',
  selectedOption: ''
})
</script>

对应的测试代码修改：

import { mount, flushPromises } from '@vue/test-utils'
import MyForm from './MyForm.vue'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({ components, directives })

test('所有字段填充后提交按钮可用', async () => {
  const wrapper = mount(MyForm, {
    global: {
      plugins: [vuetify]
    }
  })

  // 填充文本输入框
  await wrapper.find('[data-testid="name-input"]').setValue('测试名称')
  // 点击选择单选按钮
  await wrapper.find('[data-testid="option-1"]').trigger('click')
  
  // 等待所有异步更新（包括组件状态、验证逻辑）
  await flushPromises()
  
  // 手动触发表单完整验证
  await wrapper.vm.$refs.form.validate()
  await flushPromises()
  
  // 断言提交按钮已启用
  expect(wrapper.find('[data-testid="submit-btn"]').attributes('disabled')).toBeUndefined()
})

额外注意事项 #

• 必须在测试中正确注册Vuetify插件，否则组件无法正常渲染和工作
• 优先使用data-testid定位元素，避免依赖Vuetify生成的动态类名或标签结构
• flushPromises()会等待所有待处理的Promise完成，比$nextTick()更适合处理Vuetify的异步验证逻辑

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