使用 jest 和 vue-test-utils 的 Vue 测试无法解析通过 app.component() 引入的组件
Vue testing with jest and vue-test-utils fails to resolve components introduced through app.component()
我目前正在尝试向我的 Vue 3 Vite 应用程序引入测试。
我为此使用了 jest 和 vue-test-utils。
这工作正常,除非我尝试安装包含我的基本组件的组件,我在 app.mount("#app"); 之前用 app.component(basecomponent) 介绍了这些组件。在我的申请中。
虽然测试仍然 运行,但我收到错误:
[Vue warn]: Failed to resolve component: base-card
at <Anonymous ref="VTU_COMPONENT" >
at <VTUROOT>
现在我的问题是,使测试可访问的最佳方法是什么?或者我又做错了什么,因为这不起作用?
提前感谢所有答案:)
@stackmeister 您是否在测试中导入了该组件?您也可以尝试添加这部分代码:
components: {
base-card
},
您可以通过global.components
在挂载上添加组件:
const wrapper = mount(Component, {
global: {
components: {
'base-card': BaseCard
}
}
})
或者,您可以使用 config
:
全局包含组件
// jest.setup.js
import { config } from '@vue/test-utils'
config.global.components = {
'base-card': BaseCard
}
我目前正在尝试向我的 Vue 3 Vite 应用程序引入测试。
我为此使用了 jest 和 vue-test-utils。
这工作正常,除非我尝试安装包含我的基本组件的组件,我在 app.mount("#app"); 之前用 app.component(basecomponent) 介绍了这些组件。在我的申请中。
虽然测试仍然 运行,但我收到错误:
[Vue warn]: Failed to resolve component: base-card
at <Anonymous ref="VTU_COMPONENT" >
at <VTUROOT>
现在我的问题是,使测试可访问的最佳方法是什么?或者我又做错了什么,因为这不起作用?
提前感谢所有答案:)
@stackmeister 您是否在测试中导入了该组件?您也可以尝试添加这部分代码:
components: {
base-card
},
您可以通过global.components
在挂载上添加组件:
const wrapper = mount(Component, {
global: {
components: {
'base-card': BaseCard
}
}
})
或者,您可以使用 config
:
// jest.setup.js
import { config } from '@vue/test-utils'
config.global.components = {
'base-card': BaseCard
}