使用Browserify设置Karma以测试React（ES6）组件

Question

我在使用Karma + Browserify为一些React组件设置测试配置时遇到了麻烦。 提到代码是用ES6编写的，我已升级到最新的Babel版本（6+），我认为这是该配置中所有邪恶的根源。

由于Babel现在被拆分并且有这种基于插件的方法（预设），我不知道如何在karma.conf文件中指定它。

我当前的配置如下所示：

module.exports = function(config) {
  config.set({
    basePath: '',
    browsers: ['PhantomJS'],
    frameworks: ['browserify', 'jasmine'],
    files: [
      'app/js/**/*',
      'app/__tests__/**/*'
    ],
    preprocessors: {
      'app/js/**/*': ['browserify'],
      'app/__tests__/**/*': ['browserify']
    },
    browserify: {
      debug: true,
      transform: ['babelify']
    },
    singleRun: true
  });
};

但是，这会因为包错误而失败（解析文件时出现意外的令牌......）。 我也得到You need to include some adapter that implements __karma__.start method! 错误信息。

对于一些非常简单的组件来说，这很有趣。

例如简单的React文件：

import React from 'react';


class FooterComponent extends React.Component {
  render() {
    return (
      <footer>
        This is the application's footer
      </footer>
    );
  }
}


export default FooterComponent;

并且测试文件甚至不导入它。 这只是一个总是通过测试，如：

describe('Testing `Footer` component.', () => {

  describe('Method: none', function() {
    it('Should be a passing test', function() {
      expect(true).toBe(true);
    });
  });

});

package.json中的Babel / Browserify相关包是：

{
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
}

任何想法都表示赞赏。 特别是因为这在升级到Babel 6+之前曾经工作过。

干杯!

Answer 1

将.babelrc文件添加到根目录：

{
  presets: ['es2015', 'react']
}