测试执行期间的Vue警告

我正在构建一个从webpack模板（vue-wepack-template）开始的Vue应用程序。单元测试的通过命令的执行过程：测试执行期间的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配置问题，但我不知道在哪里开始调试这个。我没有触及默认的测试配置和测试运行良好...

我错过了什么？

来源

2017-06-19 ste

这看起来像多个问题。

1.未知的自定义元素：

您没有安装在Vue的实例VUE路由器。 vue-router添加了一个全局组件 - 路由器链接 - 您正在渲染的组件之一正在寻找。

解决方案

您可以在您的测试之前安装VUE路由器：

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

或注册一个模拟路由器链接组件添加到您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.错误在安装挂钩：“的ReferenceError：找不到变量：D3”

这看起来像在你的Vue的模块中的一个错误。

某处引用了d3，但尚未导入。

解决方案

确保D3是进口的。

注：我可能是错的，这可能是一个webpack的问题。尝试使用这些解决方案进行调试，如果您无法解决这些错误，则在vue-webpack-template中会出现问题。

来源

2017-06-20 21:12:24 Edd

测试执行期间的Vue警告

回答

相关问题