Reputation: 1043
I work on a website with multiple components that contain other components. Now I would like to test if the save button of a form is deactivated correctly if no data is set. I am using vuetify for the UI and Jest for testing.
Here is my parent component, containing the edit-user-details component:
<template>
<v-container>
<v-form v-model="valid">
<v-card>
<v-card-text>
<edit-user-details :user="user"></edit-user-details>
</v-card-text>
<v-card-actions>
<v-btn :disabled="!valid" @click="save()">Save</v-btn>
<v-btn @click="cancel()">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-form>
</v-container>
</template>
<script>
export default {
name: "edit-user",
components: {},
data: () => ({
user: {},
valid: false
}),
methods: {
save() {
...
},
cancel() {
...}
}
}
}
</script>
This is a part of the edit-user-details component:
<template>
<v-container>
<v-text-field
v-model="user.userName"
label="Username*"
required
:rules="[v => !!v || 'Please, enter a user name.']"
></v-text-field>
...
</v-container>
</template>
<script>
export default {
name: "edit-user-details",
props: {
user: {
type: Object,
default: () => ({})
}
}
}
</script>
And here we have my test:
import { mount, createLocalVue } from '@vue/test-utils'
import EditUser from '../../src/views/EditUser'
import Vuetify from 'vuetify';
import EditUserDetails from '../../src/components/EditUserDetails'
describe('Edited user data ', () => {
it('can be saved if valid', () => {
const localVue = createLocalVue();
localVue.use(Vuetify)
localVue.use(EditUserDetails)
const wrapper = mount(EditUser, {
localVue: localVue
});
})
})
The test is green because it has no assert. The main issue is, that I get this error: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
So my question is: How can I test a component containing other components written by me?
Thank you in advance for your help.
Upvotes: 2
Views: 3381
Reputation: 75
I haven’t tried this together with createLocalVue()
, but I hope it'll help:
import Vuetify from 'vuetify'
const vuetify = new Vuetify()
const wrapper = mount(Component, { ..., vuetify })
Upvotes: 0
Reputation: 5632
instead of mount
, use shallowMount
.
Like mount, it creates a Wrapper that contains the mounted and rendered Vue component, but with stubbed child components.
https://vue-test-utils.vuejs.org/api/#shallowmount
Upvotes: 3