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

I'm having trouble setting up a test config with Karma + Browserify for some React components. Mentioning code is written in ES6 and I've upgraded to latest Babel version (6+), which I assume is the root of all evil in this config.

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

Since Babel is now split and has this plugin-based approach (presets), I'm not sure how I should specify this in the karma.conf file.

由于Babel现在被拆分并且具有这种基于插件的方法(预设),我不确定如何在karma.conf文件中指定它。

My current config looks like this:

我当前的配置如下所示:

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

However this fails with a bundle error (Unexpected token while parsing file...). Also I get You need to include some adapter that implements __karma__.start method! error message.

但是,这会因bundle错误(解析文件时出现意外的令牌......)而失败。我还得到你需要包含一些实现__karma __。start方法的适配器!错误信息。

It's funny that this happens for some very simple components.

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

Eg simple React file:

例如简单的React文件:

import React from 'react';


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


export default FooterComponent;

And the test file doesn't even import it. It's just an always passing test like:

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

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

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

});

The Babel/Browserify related packages in package.json are:

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

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

Any ideas are appreciated. Especially since this used to work before upgrading to Babel 6+.

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

Cheers!

1 个解决方案

#1

Add a .babelrc file to your root directory:

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

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