Question

我试图为vue组件运行单元测试。我正在使用babel解析器来加载vue文件。

这是我的karma-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')
}
   ]
}
}

这是单元测试文件：

// 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

Answer 1

错误表明您的代码在index.js的第6341行有一个解析错误。因为您没有标记文件index.js，并且没有包含行号，所以无法确切地说明此错误的具体原因是什么。但是，我可以告诉你，你需要查看index.js的6341行并查看丢失括号或分号的内容，并检查周围的代码，因为有时在一行上报告的错误实际上是由文档中较早的语法错误。另外，要检查可能在index.js行上调用的任何其他文件。除此之外，我建议你在你的问题中包含index.js的内容，如果你还没有这样做，请将其标记为index.js并包含行号。这样可以更具体地告诉您如何解决问题。

SyntaxError：使用karma和webpack运行vue组件测试时解析错误

1 个答案: