使用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);
    });
  });

});

Babel/Browserify相关软件包package.json包括:

{
    "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']
}