vue.js - 使用 jest 和 vue-test-utils 进行 Vue 测试无法解析通过 app.component() 引入的组件

标签 vue.js jestjs vue-test-utils

我目前正在尝试向我的 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>
现在我的问题是,让测试可以访问它的最佳方法是什么?或者我做错了什么,因为这不起作用?
感谢您提前提供所有答案:)

最佳答案

您可以通过 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.js - 使用 jest 和 vue-test-utils 进行 Vue 测试无法解析通过 app.component() 引入的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66800780/

相关文章:

reactjs - 使用 jest 测试 RTK 查询时出现 fetchMock 错误( react Vite.js)

javascript - Jest : test components with ESM dependencies

javascript - 如何摆脱 v-on 处理程序 : "TypeError: _vm.myFcn is not a function"? 中的错误

javascript - 使用 bootstrap-vue 运行 jest 时出现问题

javascript - 在Vue和Ajax中获取请求的http状态码

javascript - 如何在 Vue.js 或 Nuxt.js 中的 First Contentful Paint 或第一个元素之后加载组件?

unit-testing - 如何在 JEST 测试中模拟全局 Vue.js 变量

vue.js - vue.js 中的复选框选择问题

javascript - Vuetify - 如何访问表单规则中的数据

javascript - 正确测试 Vue 组件中的事件处理程序