0
我試圖運行vue組件的單元測試。我使用babel解析器來加載vue文件。SyntaxError:使用karma和webpack運行vue組件測試時解析錯誤
這是我的人緣-config文件:
var webpackConfig = require('./webpack.config.js')
delete webpackConfig.entry
// karma.conf.js
module.exports = function (config) {
config.set({
browsers: ['PhantomJS'],
frameworks: ['jasmine'],
// this is the entry file for all our tests.
files: ['test/index.js'],
// we will pass the entry file to webpack for bundling.
preprocessors: {
'test/index.js': ['webpack']
},
// use the webpack config
webpack: webpackConfig,
// avoid walls of useless text
webpackMiddleware: {
noInfo: true
},
singleRun: true
})
}
這是我的WebPack配置文件:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './main.js',
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: [
path.join(__dirname, 'app'),
path.join(__dirname, 'test')
],
exclude: path.join(__dirname, 'node_modules')
}
]
}
}
這是在U NIT測試文件:
// test/component-a.spec.js
var Vue = require('vue')
var ComponentA = require('./a.vue')
describe('a.vue', function() {
// asserting JavaScript options
it('should have correct message', function() {
expect(ComponentA.data().msg).toBe('Hello from Component A!')
})
// asserting rendered result by actually rendering the component
it('should render correct message', function() {
var vm = new Vue({
template: '<div><test></test></div>',
components: {
'test': ComponentA
}
}).$mount()
expect(vm.$el.querySelector('h2.red').textContent).toBe('Hello from Component A!')
})
})
當使用-> karma start karma.conf.js
運行測試,它拋出這個解析錯誤:
14 11 2016 19:15:36.808:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
14 11 2016 19:15:36.812:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
14 11 2016 19:15:36.873:INFO [launcher]: Starting browser PhantomJS
14 11 2016 19:15:40.126:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket /#8Hrp1VoJHm1Y6JW9AAAA with id 58972703
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
SyntaxError: Parse error
at test/index.js:6341
index.js僅包含變種testsContext = require.context( '',真實,/\.spec$/) testsContext.keys()。的forEach(testsContext) –
存在index.js –
無6341線啊。然後,我的猜測是以下兩件事之一:在打包後,webpack已經創建了一個包含6341或更多行的文件,並將其命名爲index.js(檢查webpacked文件以查看...)或者在結尾附近有語法錯誤導致空行由於某種原因被解析爲新行的文件(不太可能)。那些是我首先要檢查的東西。 – 2016-11-15 14:31:28