Question

嘿，大人物。

我在我的项目设置中使用create-react-app来跳过webpack的麻烦。开发很顺利，但是当我进行单元测试时事情变得复杂了。我正在尝试通过Karma和Reactjs使用Mocha进行单元测试环境。当我启动我的业力测试运行器时会产生错误

  Chrome 57.0.2987 (Windows 10 0.0.0) ERROR
  Uncaught SyntaxError: Unexpected token import
  at src/UnitTesting/index.test.js:1

我一直在谷歌搜索几个小时，安装了许多我从未听说过的npm模块，或者已经安装的模块已经安装到我的npm开始产生编译错误的点，也无济于事......

单元测试对我来说很新，所以如果有人能帮助我，我真的很感激，这是我的一些东西

karma.conf.js

// Karma configuration
// Generated on Fri Apr 21 2017 23:21:18 GMT+0700 (SE Asia Standard Time)
var webpack = require('webpack');
var path = require('path');

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],


    // list of files / patterns to load in the browser
    files: [
      './src/UnitTesting/*test.js'
    ],


    // list of files to exclude
    exclude: [
      '**/*.png',
      '**/*.jpg',
      '**/*.jpeg',
      '**/*.css',
      '**/*.svg',
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      '../src/**/*.test.js' : ['webpack']
    },

    //CUSTOM PREPROCESSORS
    customPreprocessors:{
      babelSourceMap:{
        base: 'babel',
        options:{
          presets: ['react', 'babel-preset-es2015'],
          sourceMap: 'inline'
        },
        filename: function(file){
          return file.originalPath.replace(/\.js$/, '.es5.js');
        },
        sourceFileName: function(file){
          return file.originalPath;
        }
      },
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    //webpack config
    webpack:{
      module:{
        loaders:[
          {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader',
         include:[
           path.join(__dirname, 'src'),
           path.join(__dirname, 'UnitTesting')
         ],
         query:{
           presets:['react', 'es2015']
         }}
        ]
      },
      watch: true,
      resolve:{
        extensions:['.js', '.jsx']
      }
    },
    webpackServer:{
      noInfo: true
    },

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

.babelrc

{
  "presets":["react", "babel-preset-es2015"]
}

Karma + Mocha + React + Webpack第1行意外的令牌导入

0 个答案: