如何在Vitest中测试v-text-field规则对应的v-messages__message文本？

在Vue项目中使用Vuetify的v-text-field组件，代码如下：

<v-text-field
    density="compact"
    v-model="textMaterial"
    :rules="textMaterialRules"
    label="Text Material"
></v-text-field>

该组件嵌套在v-form内，点击底部submit类型按钮会触发表单规则校验并显示错误提示。校验规则定义如下：

export default defineComponent({
  data() {
    return {
      textMaterial: '',
      textMaterialRules: [
        (value: string | undefined) => {
          if (value?.length != 0) return true
          return 'An error message.'
        }
      ]
    }
}

手动测试时功能正常，但使用Vitest编写自动化测试时，无法找到显示校验错误的.v-messages__message元素。测试代码如下：

it('displays error message', async () => {
    const wrapper = mount(Page);
    await wrapper.vm.$nextTick();

    const submitButton = wrapper.find('v-btn[type="submit"]');
    expect(submitButton.exists()).toBe(true);
    
    await submitButton.trigger('click');
    await wrapper.vm.$nextTick();

    // TODO: not able to find v-messages__message elements
    // expect(wrapper.find('.v-messages__message').text()).toContain('the error message above.');
});

尝试通过wrapper查找v-form无效果，wrapper.html()仅返回v-form和v-text-field的HTML，组件内包含2个同类v-text-field，通常使用findAll方法定位。

1. 挂载组件时正确引入Vuetify实例 #

测试时未注册Vuetify会导致组件无法完整渲染（包括错误提示容器），需在挂载时配置全局插件：

import { mount } from '@vue/test-utils';
import vuetify from '@/plugins/vuetify'; // 替换为你的Vuetify实例路径
import Page from './Page.vue';

it('displays error message', async () => {
    const wrapper = mount(Page, {
        global: {
            plugins: [vuetify]
        }
    });
    // 后续测试逻辑
});

2. 直接调用表单的校验方法 #

仅点击按钮可能无法触发Vuetify表单的完整校验流程，可直接获取v-form实例并调用validate()方法：

it('displays error message', async () => {
    const wrapper = mount(Page, { global: { plugins: [vuetify] } });
    
    const form = wrapper.findComponent({ name: 'VForm' });
    await form.vm.validate();
    
    await wrapper.vm.$nextTick();
    // 定位所有错误提示
    const errorMessages = wrapper.findAll('.v-messages__message');
    expect(errorMessages.length).toBe(2);
    expect(errorMessages[0].text()).toBe('An error message.');
});

3. 等待过渡动画完成 #

Vuetify的错误提示带有过渡效果，需等待动画结束才能获取元素：

it('displays error message', async () => {
    const wrapper = mount(Page, { global: { plugins: [vuetify] } });
    
    const submitButton = wrapper.find('v-btn[type="submit"]');
    await submitButton.trigger('click');
    
    // 等待过渡动画完成
    await new Promise(resolve => setTimeout(resolve, 100));
    
    const errorMessage = wrapper.find('.v-messages__message');
    expect(errorMessage.exists()).toBe(true);
    expect(errorMessage.text()).toContain('An error message.');
});

4. 先断言输入框的错误状态 #

可先验证输入框是否处于错误状态，再查找错误提示元素：

it('displays error message', async () => {
    const wrapper = mount(Page, { global: { plugins: [vuetify] } });
    
    const form = wrapper.findComponent({ name: 'VForm' });
    const isValid = await form.vm.validate();
    
    expect(isValid).toBe(false); // 表单校验不通过
    const textField = wrapper.findComponent({ name: 'VTextField' });
    expect(textField.vm.error).toBe(true); // 输入框处于错误状态
    
    await wrapper.vm.$nextTick();
    const errorMessage = wrapper.find('.v-messages__message');
    expect(errorMessage.exists()).toBe(true);
});

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