配置karma.js以与React和ES6一起使用

Spike886 发表于 Dev

刺钉886

我试图用ES6开发一个react模块，却找不到任何生成器，因此我不得不从一个基本的模块中制作一个。我几乎可以配置所有东西，但是即时通讯在配置业力以测试模块方面有很多问题。

这是我的karma.conf.js

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2015-03-17 using
// generator-karma 0.9.0

module.exports = function(config) {
  'use strict';

  config.set({
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // base path, that will be used to resolve files and exclude
    basePath: '../',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['commonjs', 'mocha', 'chai'],

    // list of files / patterns to load in the browser
    files: [
      'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
      'node_modules/react/react.js',
      'lib/**/*.js',
      'test/**/*.js'
    ],
    preprocessors: {
      'lib/**/*.cjsx': ['cjsx'],
      'test/**/*.cjsx': ['cjsx'],
      'lib/**/*.js': ['babel', 'commonjs'],
      'test/**/*.js': ['babel', 'commonjs']
    },
    babelPreprocessor: {
      options: {
        sourceMap: 'inline'
      },
      filename: function (file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function (file) {
        return file.originalPath;
      }
    },

    // list of files / patterns to exclude
    exclude: [
    ],

    // web server port
    port: 8080,

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: [
      'Chrome', 'PhantomJS'
    ],

    // Which plugins to enable
    plugins: [
      'karma-commonjs',
      'karma-cjsx-preprocessor',
      'karma-babel-preprocessor',
      'karma-phantomjs-launcher',
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-chai'
    ],

    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,

    colors: true,

    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO,

    // Uncomment the following lines if you are using grunt's server to run the tests
    // proxies: {
    //   '/': 'http://localhost:9000/'
    // },
    // URL root prevent conflicts with the site root
    // urlRoot: '_karma_'
  });
};

在这一点上我有以下错误

Chrome 42.0.2311 (Mac OS X 10.10.2) ERROR
  Uncaught ReferenceError: module is not defined
  at /Users/admin/workspace/open_source/react-component-inspector/node_modules/react/react.js:1

如果我从文件部分中删除了反应引用，我会得到另一个错误

PhantomJS 1.9.8 (Mac OS X) ERROR
  Uncaught Error: Could not find module 'react' from '/Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js'
  at /Users/admin/workspace/open_source/react-component-inspector/node_modules/karma-commonjs/client/commonjs_bridge.js:85

如果我删除commonJS我得到

PhantomJS 1.9.8 (Mac OS X) ERROR
  ReferenceError: Can't find variable: exports
  at /Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js:5

或者至少有人可以向我推荐一个具有业力，ES6，jsx的生成器，以构建模块而不是Web应用程序？

谢谢您的帮助

科尔·里德

我相信您只需要将react文件的路径添加到预处理器文件列表中即可。这是因为react文件也像您的应用程序文件一样也使用commonjs格式，并且当该文件加载到chrome中时，与node不同，浏览器没有“模块”对象来自何处的概念。更新了以下代码的节选。

        // list of files / patterns to load in the browser
        files: [
          'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
          'node_modules/react/react.js',
          'lib/**/*.js',
          'test/**/*.js'
        ],
        preprocessors: {
          // you can probably leave off babel here.
          'node_modules/react/react.js': ['babel', 'commonjs'],
          'lib/**/*.cjsx': ['cjsx'],
          'test/**/*.cjsx': ['cjsx'],
          'lib/**/*.js': ['babel', 'commonjs'],
          'test/**/*.js': ['babel', 'commonjs']
        },