如何解决残端子组件似乎已呈现,并在Jest中引发错误
Jest测试应该测试FileInput组件,该组件包含ConfirmationDialog组件作为子组件。而DialogBase组件是ConfirmationDialog的子组件。 测试是绿色的,但会引发错误,即使对ConfirmationDialog进行了存根并且对$ vuetify对象进行了模拟,它也无法读取未定义的属性lang。
<template>
<confirmation-dialog
v-model="deleteDialog"
:title="`${$vuetify.lang.t('$vuetify.shared.confirmDeleteDialogTitle')}`"
:description="
`${$vuetify.lang.t('$vuetify.announcementManager.promptManagament.confirmDeleteText')}`
"
:confirmResultValue="deleteDialogKey"
@confirm="deletePrompt"
@cancel="cancelDeletion"
/>
</template>
<script lang="ts">
@Component({
components: {
ConfirmationDialog: () =>
import(
'../../../presentation/dialogs/ConfirmationDialog/Shared.ConfirmationDialogComponent.vue'
),},})
export default class FileInputComponent extends InputComponentBase {
private deleteDialog: boolean;
private deleteDialogKey: string;
constructor() {
super();
this.deleteDialog = false;
this.deleteDialogKey = '';
}
deletePrompt(languageKey: string) {
//deletes the prompt
}
cancelDeletion() {
//cancels deletion
}
}
</script>
笑话测试:
beforeEach(() => {
localVue = createLocalVue();
const vuetify = new Vuetify();
localVue.use(Vuex);
localVue.use(vuetify);
});
it('Test',() => {
const wrapper = shallowMount(FileInput,{
localVue,stubs: {
'dialog-base': true,'confirmation-dialog': true,mocks: {
$vuetify: {
lang: {
t: (val: string) => val,locales: {} as LangLocales,current: '',});
});
错误:
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"
found in
---> <DialogBaseComponent>
<ConfirmationDialog>
<VRow>
<FileInputComponent>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
TypeError: Cannot read property 'lang' of undefined
at fn (C:\webapp\src\modules\shared\presentation\dialogs\ConfirmationDialog\Shared.ConfirmationDialogComponent.vue:1153:53)
at normalized (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:2584:37)
at Proxy.renderSlot (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:2680:13)
at Proxy.render (C:\webapp\src\modules\shared\presentation\dialogs\DialogBase\Shared.DialogBaseComponent.vue:1395:277)
at VueComponent.Vue._render (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:3538:22)
at VueComponent.updateComponent (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4054:21)
at Watcher.get (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
at new Watcher (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4454:12)
at mountComponent (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4061:3)
at VueComponent.Object.<anonymous>.Vue.$mount (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:8392:10)
at init (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
at createComponent (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:5958:9)
at createElm (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:5905:9)
at VueComponent.patch [as __patch__] (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:6494:9)
at VueComponent.Vue._update (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:3936:19)
at VueComponent.updateComponent (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4054:10)
at Watcher.get (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
at Watcher.run (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4540:22)
at flushSchedulerQueue (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:4298:13)
at Array.<anonymous> (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:1976:12)
at flushCallbacks (C:\webapp\node_modules\vue\dist\vue.runtime.common.dev.js:1902:14)
at processticksAndRejections (internal/process/task_queues.js:97:5)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。