全局延迟加载组件。测试时出错答案

【问题标题】：Lazy loading component globally. Error on testing全局延迟加载组件。测试时出错
【发布时间】：2020-07-07 21:51:21
【问题描述】：

我正在像这样在全局范围内延迟加载组件：

Vue.component(
    'TheDialog',
    () => import(/* webpackChunkName: "theDialog" */  '@/components/TheDialog')
)

工作正常，但是当我在另一个包含 TheDialog 作为子组件的组件上运行测试时，我收到以下警告：

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

另外，在没有延迟加载的情况下导入全局组件时，我遇到了同样的错误：

import TheDialog from '@/components/TheDialog'

Vue.component(
    'TheDialog', TheDialog
)

有人知道这个问题吗？

【问题讨论】：

该组件注册在您的测试代码路径中吗？
不，它的全局导入
但它必须从某处调用。你如何从你的测试代码中全局注册它？
你是对的！我没有在我的测试中导入它。但我不知道我需要这样做，因为我在我的测试中使用了 shallowMount 并且 AFAIN 那时我不必导入子组件。感谢您的帮助，请写下您的答案，以便我投赞成票

【解决方案1】：

基于vuejs/vue-test-utils Issue#1116，全局注册的组件在使用shallowMount时仍然需要注册。

一种解决方案是在localVue 实例上全局注册组件：

const localVue = createLocalVue()
localVue.component('TheDialog', TheDialog)

shallowMount(MyComponent, { localVue })

或者你可以在安装时明确地stub它：

shallowMount(MyComponent, { stubs: ['TheDialog'] })

另一种解决方案是将您的全局组件注册（例如，从main.js）移动到一个单独的文件中，该文件也可以在您的测试中导入。

【讨论】：