测试包含我自己编写的其他组件的VueJS组件

Question

我在一个网站上工作，该网站有多个包含其他组件的组件。现在我想测试一下，如果没有设置数据，表单的保存按钮是否被正确停用。我使用vuetify作为UI，使用Jest进行测试。

这是我的父组件，包含编辑用户详细信息组件：

<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>

这是编辑用户详细信息组件的一部分：

<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>

这里有我的测试：

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
});
})
})

测试为绿色，因为它没有断言。主要问题是，我得到了这个错误：[Vue warn]：未知的自定义元素：-你正确注册了组件吗？对于递归组件，请确保提供"name"选项。

所以我的问题是：如何测试包含我编写的其他组件的组件？

提前感谢您的帮助。

Answer 1

使用shallowMount而不是mount。

与mount一样，它创建了一个包含已挂载和渲染的Vue组件，但带有存根的子组件。

https://vue-test-utils.vuejs.org/api/#shallowmount

Answer 2

我还没有和createLocalVue()一起尝试过，但我希望它会有所帮助：

import Vuetify from 'vuetify'
const vuetify = new Vuetify()
const wrapper = mount(Component, { ..., vuetify })