6
我有一個或多或少的香草Laravel + Vue.js應用程序，我正在嘗試做一些JS testing with Karma and Jasmine。如果我嘗試使用() => {}風格的函數或關鍵字，如const在我的測試中，他們未能與意外令牌錯誤，但是，我不使用import關鍵字有一個問題，我能夠transpile與.vue文件沒有問題工作。SyntaxError：意外的令牌'const'（包括Vue，Karma，Webpack，PhantomJS）
像
expect(true).toBe(true);
一個平凡的斷言似乎做工精細（見最後一行）
$ ./node_modules/karma/bin/karma start
22 11 2016 11:09:23.250:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
22 11 2016 11:09:23.254:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
22 11 2016 11:09:23.263:INFO [launcher]: Starting browser PhantomJS
22 11 2016 11:09:24.025:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#U1dCZ7i3UtsC-M3_AAAA with id 84458811
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.004 secs/0.002 secs)
然後，如果我添加一個簡單的const聲明，我的測試功能
const myVar = 1
expect(true).toBe(true);
我收到一個錯誤：
$ ./node_modules/karma/bin/karma start
22 11 2016 11:10:00.741:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
22 11 2016 11:10:00.745:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
22 11 2016 11:10:00.752:INFO [launcher]: Starting browser PhantomJS
22 11 2016 11:10:01.659:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#Gwh8ywcLStrKf-ljAAAA with id 78654911
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
SyntaxError: Unexpected token 'const'
at tests/unit/Example.spec.js:165
相反，如果我嘗試導致語法錯誤
const = 1 // syntax error
expect(true).toBe(true);
然後巴貝爾抱怨（在第一行，之前噶或PhantomJS啓動時）
22 11 2016 11:07:00.079:ERROR [preprocessor.babel]: /Users/crcarter/Software/CropPlanning/cps-php/resources/assets/js/tests/unit/Example.spec.js: Unexpected token (8:15)
at /Users/crcarter/Software/CropPlanning/cps-php/resources/assets/js/tests/unit/Example.spec.js
22 11 2016 11:07:00.090:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
22 11 2016 11:07:00.091:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
22 11 2016 11:07:00.101:INFO [launcher]: Starting browser PhantomJS
22 11 2016 11:07:00.986:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#9Y6QLVxtJ57qRrgDAAAA with id 56249014
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
You need to include some adapter that implements __karma__.start method!
這似乎意味着Babel正在對Example.spec.js文件進行分析/轉譯，但轉譯後的版本並未正確傳送到瀏覽器，即使Example.vue文件似乎正確傳送。
我能做些什麼才能使const和() => {}這樣的東西在我的測試中工作？謝謝。
以下是相關文件：
resources/assets/js/components/Example.vue
resources/assets/js/tests/unit/Example.spec.js
karma.conf.js
package.json
// Example.vue
<template>
<div class="container">
</div>
</template>
<script>
export default {
mounted() {
console.log('Component ready.')
},
data() {
return { input: '# Hello!' }
}
}
</script>
// Example.spec.js
import Example from '../../components/Example.vue';
describe('Example', function() {
it('should set correct default data', function() {
const myVar = 1
// trivial assertions
expect(true).toBe(true);
});
});
// karma.conf.js
var path = require('path')
var basePath = './resources/assets/js/';
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
port: 9876,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: true,
basePath: basePath,
webpack: {
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, 'node_modules')],
},
resolveLoader: {
fallback: [path.join(__dirname, 'node_modules')]
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.js$/, loader: 'babel',
include: basePath,
}
]
}
},
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
files: [
{ pattern: 'tests/**/*.spec.js', watched: false },
],
exclude: [],
preprocessors: {
'app.js': ['webpack', 'babel'],
'tests/**/*.spec.js': [ 'babel', 'webpack' ]
},
})
}
條而package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
},
"dependencies": {
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-babel-preprocessor": "^6.0.1",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-webpack": "^1.8.0"
}
}
請嘗試期待（true）.to.equal（true）; –
在[karma-babel-preprocessor docs]（https://github.com/babel/karma-babel-preprocessor）中說：「從Babel 6.0開始，你需要告訴Babel使用哪些功能」不要使用webpack，但我看不到你在你顯示的代碼中的任何位置設置預設。 –
就像craig說的那樣，babel有不同的es6支持階段，請嘗試在'.babelrc'中使用'es2015' +'stage-3'，這個組合在我的情況下可以很好地傳輸。 –