如何使用KARMA对React JSX ES6代码进行单元测试？

Question

我用ES6编写了我的React应用程序.现在我想用ES6编写我的测试.所以这里的挑战是配置业力.

和谷歌一起,我带着karma.config.js走了这么远(我省略了配置文件的相同部分!):

...
files: [
  '../node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
  '../app/**/*.jsx',
  '../test/**/*.jsx'],

 preprocessors: {
  'app/**/*.jsx': ['react-jsx', 'babel'],
  'test/**/*.jsx': ['react-jsx', 'babel']
 },
 'babelPreprocessor': {
  options: {
    sourceMap: 'inline'
  },
  filename: function(file) {
    return file.originalPath.replace(/\.jsx$/, '.es5.js');
  },
  sourceFileName: function(file) {
    return file.originalPath;
  }
},
....

我认为这个设置应该做什么:1)将JSX编译为JS,接下来babel应该将ES6转换为ES5.这与polyfill我预期的一起应该在phantomjs中运行.但不,这是我运行时来自业力的输出:

PhantomJS 1.9.8 (Mac OS X) ERROR
    SyntaxError: Parse error
    at Projects/ES6/app/js/app.jsx:35
    PhantomJS 1.9.8 (Mac OS X): Executed 0 of 0 ERROR (0.027 secs / 0 secs)
    [20:36:59] Karma has exited with 1

第35行app.jsx包含实际的JSX部分.因此,出于某种原因,预处理器似乎并没有那么多.任何有关预处理器的帮助都会受到赞赏吗？

更新:我有这个几乎工作的nog.事实证明我应该像这样交换我的预处理器

 '../app/**/*.jsx': ['babel', 'react'], 
 '../test/**/*.jsx': ['babel', 'react']

现在,当我运行这个时,我得到:

Uncaught ReferenceError: require is not defined

我以为我有一个polyfill :(

Answer 1

我在浏览器和JSX中使用ES6.对于编译我使用Babel.以下配置适用于我.

karma.conf.js

...
frameworks: ['browserify', 'jasmine'],
files: [
  'Component.js',                     // replace with your component
  '__tests__/Component-test.js'
],
preprocessors: {
  'Component.js': 'browserify',
  './__tests__/Component-test.js': 'browserify'
},
browserify : {
  transform : ['babelify']
},
...

__tests __ /组件的test.js

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var Component = require('../Component.js');

describe('Component', () => {

  it('should work', () => {
    var component = <Component />;
    TestUtils.renderIntoDocument(component);
    expect(component).toBeTruthy();
  });

});

如果您有任何问题,请告诉我.