添加Vue.js到Rails 5.1和摩卡單元測試不工作

Question

回購可以在這裏找到：https://github.com/systemnate/vuetesting

我通過運行命令rails _5.1.2_ new vuetesting --webpack=vue

創建一個Rails應用程序，然後添加摩卡和柴yarn add mocha chai --save-dev

然後創建一個測試目錄運行mkdir test/javascript

然後我創建了一個規範文件來運行... touch app/javascript/App.spec.js

而在下面的代碼粘貼：

const chai = require('chai') 

const expect = chai.expect 

describe('first test',() => { 
    it('is true',() => { 
    expect(true).to.equal(true) 
    }) 
}) 

，並添加以下內容package.json

"scripts": { 
    "test": "mocha test/**/*.spec.js --recursive" 
} 

現在前次的紗線測試通過。我們嘗試實施一個Vue特定的測試。

我運行命令yarn add avoriaz mocha-webpack --save-dev

，然後進行修改的package.json使用摩卡的WebPack：

"scripts": { 
    "test": "mocha-webpack test/**/*.spec.js --recursive" 
    } 

yarn test還通過。

現在我想測試單個文件組件。首先，我加入到我的測試的頂部，這樣它看起來像這樣：

import Vue from 'vue'; 
import App from '../../app/javascript/packs/App.vue'; 

const chai = require('chai') 
const expect = chai.expect 

describe('first test',() => { 
    it('is true',() => { 
    expect(true).to.equal(true) 
    }) 
}) 

然後運行yarn test並獲得以下輸出

yarn test v0.27.5 
$ mocha-webpack test/**/*.spec.js --recursive 

ERROR in ./app/javascript/packs/App.vue 
Module parse failed: /Users/natedalo/Ruby/vuetesting/app/javascript/packs/App.vue Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| <template> 
| <div id="app"> 
|  <p>{{ message }}</p> 
@ ./test/javascript/App.spec.js 2:0-53 
error Command failed with exit code 1. 

上什麼可能會錯誤有什麼想法？

Answer 1

Unit Test Vue Components for Beginners使用作爲指導，並從上面的鏈接複製webpack.config.js和.setup文件，然後改變所述試運行這樣讀取的package.json內：

"test": "mocha-webpack --webpack-config test/javascript/webpack.test.config.js test/**/*.spec.js --recursive --require test/javascript/.setup"