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