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

Question

我用ES6写了我的React应用程序。现在我也想使用ES6编写我的测试。因此，这里的挑战是配置karma。

与谷歌一起，我已经通过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等环境中运行了。但当我运行时，karma输出的结果是这样的：

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

app.jsx的第35行包含了实际的JSX部分。但是，由于某些原因，预处理器似乎没有做太多工作。如果有关于预处理器的任何帮助，将不胜感激。

更新：我现在几乎完成了这个项目。事实证明，我之前使用的预处理器应该交换位置。

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

现在，当我运行这个程序时，得到的结果是：

Uncaught ReferenceError: require is not defined

我本以为我有该补丁 :(

- Jeanluca Scaljeri

---

你是否使用webpack来构建你的资源？我有一篇关于如何设置Karma使用Webpack作为测试预处理器的文章：http://qiita.com/kimagure/items/f2d8d53504e922fe3c5c老实说，我从未尝试过单独使用babel。 - kakigoori

我使用 browserify 和 babelify。你的项目似乎处理JSX，但不支持ES6。这只是在WebPack中进行微调吗（我没有使用过webpack）？ - Jeanluca Scaljeri

难道karma不应该加载输出的JS文件而不是输入的JSX文件吗？（我对JSX不是很熟悉，但以前设置过ES6/Babel项目） - ssube

这是一种可能性，但那样你总是需要先构建才能测试。这种方式，karma会完成所有的工作！ - Jeanluca Scaljeri

Answer 1

我使用ES6，配合Browserify和JSX。编译方面我使用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__/Component-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();
  });

});

如果您有任何问题，请告诉我。

- zemirco

---

不错！这个星期我会有时间进行实验。所以我很快就会发布我的发现！ - Jeanluca Scaljeri

我已经测试过了，在Chrome浏览器中可以工作。非常感谢!! - Jeanluca Scaljeri

@JeanlucaScaljeri，你能把你的工作配置文件放在gist或其他地方让我看看吗？ - rdamborsky

为什么你在使用 var 而不是 let？ - Aral Roca

Answer 2

@zemirico的回答对我没起作用，而且有点过时了。

这里是我自己的设置，你可以用于karma.conf.js：

...
frameworks: ['jasmine', 'browserify'],

files: [
    'src/*',
    'tests/*'
],

preprocessors: {
    'src/*': ['browserify'],
    'tests/*': ['browserify']
},

browserify: {
    debug: true,
    transform: ['babelify']
}
...

它使用babelify而不是reactify，并且有其他依赖项。因此，项目根目录中也需要.babelrc：

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

安装还需要在package.json文件中包含以下依赖项：

  "devDependencies": {
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-browserify": "^5.0.3",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "watchify": "^3.7.0",
    "babel-preset-es2015": "^6.6.0",
    "react": "^15.0.1",
    "react-addons-test-utils": "^15.0.1",
    "react-dom": "^15.0.1"
  }

使用方法

在 src/my-element.jsx 中创建一个新的 React 组件：

import React from 'react';

export default class MyElement extends React.Component {

  constructor(props) {
    super(props);
    this.state = {isActive: false};

    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({isActive: !this.state.isActive});
  }

  render() {
    return (
      <div onClick={this.onClick}>{this.state.isActive ? "I am active!" : "I am not active :("}</div>
    );
  }
}

接着，在tests/my-element-spec.js中创建测试规格，对其进行测试：

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import MyElement from '../src/my-element.jsx';

describe('MyElement', () => {

  // Render a checkbox with label in the document
  const element = TestUtils.renderIntoDocument(<MyElement />);
  const elementNode = ReactDOM.findDOMNode(element);

  it('verity correct default text', () => {
    expect(elementNode.textContent).toEqual('I am not active :(');
  });

  it ('verify text has been changed successfuly after click', () => {
    // Simulate a click and verify that it is now On
    TestUtils.Simulate.click(elementNode);

    // Verify text has been changed successfully
    expect(elementNode.textContent).toEqual('I am active!');
  });
});

演示

GitHub上的实例已经可以正常运行。

- Karolis Ramanauskas