在 Nuxt JS 中导入 SVG 时,Jest 中出现“[Vue 警告]:无效的组件定义”

Posted

技术标签:

【中文标题】在 Nuxt JS 中导入 SVG 时,Jest 中出现“[Vue 警告]:无效的组件定义”【英文标题】:"[Vue warn]: Invalid Component definition" in Jest when importing an SVG in Nuxt JS 【发布时间】:2020-04-23 01:55:15 【问题描述】:

当我在被测试的组件中导入 SVG 时,我在 Jest 单元测试中出现了一个错误:

console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Invalid Component definition: 

    found in

    ---> <Navbar>
           <Root>

错误信息有点模糊,但是当我删除 SVG 文件的导入时它消失了,所以我假设如下所示的 SVG 导入是原因:

SVG import code

我在下面的链接中找到了涉及修改“vue.config.js”的 VueJS 解决方案,但它似乎不适用于 NuxtJS,因为那里没有这样的配置文件。我尝试在“nuxt.config.js”中执行此操作,但没有任何反应。

SVG loading vue-svg-loader; [Vue warn]: Invalid Component definition

我的 SVG 加载器是“nuxt-svg-loader”。我的预感是 VueJS 不支持这个模块,我的测试使用“vue/test-utils”中的“shallowMount”,它运行 VueJS 而不是 NuxtJS。

任何想法都将不胜感激。

【问题讨论】:

这有什么更新吗?你解决了吗? 【参考方案1】:

我遇到了同样的问题,通过在 SVG 的导入路径中添加 ?inline 解决了这个问题

【讨论】:

以上是关于在 Nuxt JS 中导入 SVG 时,Jest 中出现“[Vue 警告]:无效的组件定义”的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Nuxt 的 nuxt.config.js 中导入 mdi 图标模块

如何从 nuxt.js 的 assets 文件夹中导入 css 文件

以编程方式从文件夹中导入 Vue 组件,而不是硬编码(我实际上使用的是 Nuxt,但我将其称为 Vue)

使用 jest 测试 nuxt.js 应用程序时访问 `process.env` 属性

Angular 5:如何在 Jest 测试中导入 jQuery?

如何在 Vue Nuxt 项目中导入整个 SCSS 文件夹?