tenho um formulario contendo o input com as seguintes caracteristicas:
<ValidationProvider v-slot="{ errors }" rules="required|min:6">
<v-text-field
v-model="dados.nome"
label="Nome"
type="text"
placeholder="Informe seu nome completo"
:error-messages="errors"
outlined
id="nome_campo"
/>
</ValidationProvider>
Estou tentando realizar os testes com test util para ao setar o campo nome com a quantidade de caracteres menor do que 6 verificar se renderiza a mensagem de erro atraves do seguinte codigo:
import { createLocalVue, mount } from '@vue/test-utils'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import flushPromises from 'flush-promises';
import VeeValidate from 'vee-validate'
import RegisterPart1 from '@/components/loginComponents/RegisterPart1.vue'
import { state } from '@/store/index.js'
const localVue = createLocalVue()
const config = { events: 'change'}
localVue.use(Vuex, VeeValidate, config)
beforeEach(() => {
let vuetify = new Vuetify()
wrapper = mount(RegisterPart1, {
sync: false,
store: new Vuex.Store({
state
}),
localVue,
vuetify
})
inputName = wrapper.find('#name')
})
describe('testes no campo nome', () => {
test('verificando a mensagem de erro se a quantidade de caracteres for menor do que 6 digitos', async () => {
const wrapper = mount(RegisterPart1)
const input = wrapper.find('#nome_campo')
input.setValue('an')
await flushPromises()
const msgErro = wrapper.find('errors').element.textContent
expect(msgErro).toBeTruthy()
})
})
porem nao funciona. Alguem poderia dar uma ajuda de como solucionar esse problema ?