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

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

1 个答案: