Vue Test Utils - Snapshot of vue components not working

54 Views Asked by At

Im trying to get a snapshot of my vue component. Instead, it prints just some code.

Shouldn't I be able to see the all html view rendered in the snapshot with the fields filled in? Im new with vue test utils, sorry if that's a silly question My Component is:

<template>
    <v-card>
        <validation-observer ref="form" v-slot="{ invalid }">
            <fieldset>
              <v-form @submit.prevent="editClient == null ? addClient() : updateClient()" :disabled="loading">
                <v-card-title>
                    Adicionar cliente
                </v-card-title>
                <v-card-text>
                  <DialogSuccess :opened="success" @on-ok="success = false" >
                    <p>Cliente adicionado com sucesso</p>
                  </DialogSuccess>
                  <v-row>
                    <v-col>
                        <validation-provider v-slot="{ errors }" vid="name" name="Name" rules="required">
                            <v-text-field
                                id="input"
                                v-model="client.name"
                                prepend-inner-icon="mdi-account-details"
                                label="Nome *"
                                clearable
                                :error-messages="errors"
                            ></v-text-field>
                    </validation-provider>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col><small>Por defeito o cliente vai aparecer como ativo. Se pretender eliminar o cliente, poderá faze-lo na lista quando fechar esta janela</small></v-col>                    
                  </v-row>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="error"
                        depressed
                        @click="$emit('close')"
                    >
                        Cancelar
                    </v-btn>
                    <v-btn :disabled="invalid" depressed type="submit">
                    Gravar
                    </v-btn> 
                </v-card-actions>
                </v-form>
            </fieldset>            
        </validation-observer>
    </v-card>
</template>
<script>
import DialogSuccess from '@/components/ui/DialogSuccess.vue';
import Client from "@/api/Client.js";

export default {
    components:{
        DialogSuccess
    },
    props:{
        editClient: Object
    },
    mounted(){
        if(this.editClient != null)
            this.client.name = this.editClient.name
    },
    data(){
        return{
            loading: false,
            success:false,
            client:{
                name: '',
                deleted_client: false
            }
        }
    },
    methods:{
        updateClient(){
            this.loading = true
            Client.update(this.client, this.editClient.id)
                .then(() => {
                    this.success = true;

                    this.loading = false;

                    this.$emit('close-update')
                });
        },
        addClient(){
            this.loading = true
            
            Client['create'](this.client).then(() => {

                this.success = true;

                this.loading = false;

                this.$emit('close-update')

                }).catch(err => {
                this.loading = false;

                if(err.response.status == 422) {

                    this.$refs.form.setErrors(err.response.data.errors);
                    
                    return;
                }

                this.error.title = "Erro " + err.response.status;

                this.error.message = err.response.data.message;

            });
        }
    }
}
</script>

My vue test utils code:

import { mount } from '@vue/test-utils'
import Add from '@/components/clients/Add'

describe('Add.vue', () => {
  it('renders props.msg when passed', () => {

    const wrapper = mount(Add, {
        propsData: {
          editClient: {
            name: 'Client A',
            deleted_client: false
          }
        }
    })
    
    //expect(wrapper.vm.editClient.name).toBe('Client A')

    expect(wrapper.html()).toMatchSnapshot()
  })
})

My result:

// Jest Snapshot v1, 

exports[`Add.vue renders props.msg when passed 1`] = `
<v-card>
  <validation-observer></validation-observer>
</v-card>
`;

Why the snapshot stops at validation observer? Am I making something wrong or Am I missing some library?

I'm using vuejs2

0

There are 0 best solutions below