測試執行期間的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警告

回答

相關問題