javascript - 测试执行期间Vue警告

Question

我正在从 webpack 模板 ( vue-wepack-template ) 开始构建一个 Vue 应用程序。通过命令执行单元测试时:

yarn run unit

我可以看到一些 Vue 警告:

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/xxxxxxx/components/node_modules/vue-loader/index.js??ref--1!/Users/xxxxxxxx/components/node_modules/eslint-loader/index.js??ref--0!/Users/xxxxxxxx/components/src/components/Layout/FullScreen.vue
    Used by 2 module(s), i. e.

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

ERROR LOG: '[Vue warn]: Error in mounted hook: "ReferenceError: Can't find variable: d3"

它们看起来像是某种 Webpack 配置问题，但我不知道从哪里开始调试。我没有触及默认的测试配置，测试运行良好...

我错过了什么？

Answer 1

这看起来像是多个问题。

<强>1。未知的自定义元素:

您没有在 Vue 实例上安装 vue-router。 vue-router 添加了一个全局组件 - router-link - 您正在渲染的组件之一正在寻找。

解决方案

您可以在测试之前安装 vue-router:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // install vue-router

或者将模拟 router-link 组件注册到您的 vue 实例

Vue.component('router-link', { // registers router-link component
  template: `<div />`
})

运行测试之前

<强>2。有多个模块的名称仅大小写不同。

当您不小心将模块导入大写时，通常会引发此错误:

// some-file.js
import vue from 'vue'
// another-file.js
import vue from 'Vue' // Cause of error - multiple modules with names that only differ in casing

解决方案

确保使用小写字母来标识导入中的模块:

// some-file.js
import vue from 'vue'
// another-file.js
import vue from 'Vue'

就您而言，导入 Layout/FullScreen.vue 时似乎会发生错误

<强>3。安装的钩子(Hook)错误:“ReferenceError:找不到变量:d3”

这看起来像是您的 Vue 模块之一中的错误。

您在某处引用 d3，但尚未导入它。

解决方案

确保 d3 已导入。

注意:我可能是错的，这可能是 webpack 的问题。尝试使用这些解决方案进行调试，如果无法修复错误，请在 vue-webpack-template 中提出问题.