全局延迟加载组件。测试错误

Question

我正在全局延迟加载组件，如下所示：

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

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

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

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

import TheDialog from '@/components/TheDialog'

Vue.component(
    'TheDialog', TheDialog
)

有人知道这个问题吗？

Answer 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）移动到一个单独的文件中，该文件也可以在您的测试中导入。

Lazy loading component globally. Error on testing