Estoy tratando de probar si aparece un error de validación. Aparecen en el navegador. Sin embargo, mis pruebas están fallando. Este es mi código:

 import {shallowMount, createLocalVue} from '@vue/test-utils' import SignUpUser from '@/components/SignForms/SignUpUser.vue' import VueRouter from 'vue-router' import VeeValidate from 'vee-validate' import flushPromises from 'flush-promises'; const localVue = createLocalVue() localVue.use(VueRouter) localVue.use(VeeValidate) const router = new VueRouter() test('displays error message when validations fail', async () => { const wrapper = shallowMount(SignUpUser, { localVue, router, }) wrapper.find('#username').setValue(''); const text = wrapper.findComponent('#username-error') await flushPromises(); expect(text.textContent).toBeTruthy() })

Creo que Vue no está actualizando el DOM con los mensajes de error y no entiendo por qué.

El componente se ve así:

 <input id="username" v-model="username" v-validate="'required|alpha_dash'" name="username" type="text" placeholder="Eg: harinepali123" > <p class="form_error" id='username-error'> {{ errors.first("username") }} </p>