2016-11-14 26 views
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 

回答

0

的錯誤表示有語法錯誤,在你的代碼的行6341 index.js。由於您沒有將文件標記爲index.js,並且未包含行號,因此無法確切地說出此錯誤的具體原因是什麼。但是,我可以告訴你,你需要查看index.js的第6341行,並檢查是否有像丟失括號或分號的東西,還要檢查周圍的代碼,因爲有時在一行中報告的錯誤實際上是由文檔中較早的語法錯誤。此外,要檢查可能在index.js的該行上調用的任何其他文件。除此之外,我建議你在你的問題中包含index.js的內容,如果你還沒有這樣做,請將它標記爲index.js幷包含行號。這將有可能更具體地告訴你如何解決這個問題。

+0

index.js僅包含變種testsContext = require.context( '',真實,/\.spec$/) testsContext.keys()。的forEach(testsContext) –

+0

存在index.js –

+0

無6341線啊。然後,我的猜測是以下兩件事之一:在打包後,webpack已經創建了一個包含6341或更多行的文件,並將其命名爲index.js(檢查webpacked文件以查看...)或者在結尾附近有語法錯誤導致空行由於某種原因被解析爲新行的文件(不太可能)。那些是我首先要檢查的東西。 – 2016-11-15 14:31:28

相關問題