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

【问题标题】：Vue testing with jest and vue-test-utils fails to resolve components introduced through app.component()使用 jest 和 vue-test-utils 进行 Vue 测试无法解析通过 app.component() 引入的组件
【发布时间】：2021-06-22 07:53:06
【问题描述】：

我目前正在尝试向我的 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>

现在我的问题是，让测试可以访问的最佳方法是什么？或者我做错了什么，因为这不起作用？
提前感谢所有答案:)

【问题讨论】：

标签： vue.js jestjs vue-test-utils

【解决方案1】：

@stackmeister 你是否在测试中导入了这个组件？您也可以尝试添加这部分代码：

    components: {
    base-card
  },

【讨论】：

在使用 shallowMount 时也需要这个吗？即使使用 shallowMount，我仍然会收到所有组件的警告。我的组件不是全局组件。

【解决方案2】：

你可以通过global.components在mount上添加组件：

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
}

【讨论】：