2
respostas

como efetuar test utils com vee-validate

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 ?

2 respostas

Oi Elder, tudo bem?

Desculpe a demora em te responder!

Há alguns fatores que podem ocasionar o problema mencionado no seu tópico. Peço que você:

  • Devemos verificar se o ID usado na montagem e na busca do elemento é o mesmo. No código fornecido, você está procurando um elemento com o ID "nome_campo" (const input = wrapper.find('#nome_campo')). No entanto, no código de montagem do componente (wrapper = mount(RegisterPart1, ...)), você está usando id="name" para o campo de entrada.

  • Precisamos nos certificar de que o componente VeeValidate esteja configurado corretamente: no código fornecido, você está importando VeeValidate, mas parece não estar configurando as regras de validação para o campo "nome" e observe se você definiu as regras de validação corretas para o campo "nome" usando extend do VeeValidate.

  • É necessário esperar a validação assíncrona. No teste, você está usando await flushPromises() após definir o valor do campo de entrada. No entanto, parece que a validação assíncrona pode não estar sendo aguardada corretamente. Tente adicionar um pequeno atraso após a chamada setValue para garantir que a validação seja concluída antes de verificar a mensagem de erro, por exemplo, usando await new Promise(resolve => setTimeout(resolve, 100)).

Caso queira se aprofundar mais sobre os testes que temos relacionados a Vue, recomendo o artigo abaixo:

Todavia, vale ressaltar que como é um assunto externo ao curso e que não tenho acesso ao cenário completo do projeto outros testes terão de ser feitos a fim de obter o resultado esperado, mas espero que esta resposta seja um bom ponto de partida para a resolução do seu problema.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Obrigado Rodrigo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software