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

我已经用ES6编写了我的React应用程序。现在我想用ES6编写我的测试。因此，这里的挑战是配置业力

我和谷歌一起使用karma.config.js（我省略了配置文件中相同的部分！）：

我认为这个设置应该做的是：1）将JSX编译成JS，接下来的

babel

应该将ES6转换成ES5。例如，我希望它应该在phantomjs中运行。但不，这是我运行因果报应时的输出：

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部分。因此，出于某种原因，预处理器似乎没有这么多功能。如果您对预处理器有任何帮助，我们将不胜感激

更新：我有一个几乎可以正常工作的nog。原来我的预处理器应该这样交换

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

现在，当我运行这个时，我得到：

Uncaught ReferenceError: require is not defined

---

我想我有一个polyfill：（

我使用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']
},
...

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

});

\uuuu测试\uuuu/Component test.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']
},
...

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

});

var React=require（'React/addons'）；
var TestUtils=React.addons.TestUtils；
var-Component=require（'../Component.js'）；
描述（'组件'，（）=>{
它（'应该工作'，（）=>{
var分量=；
TestUtils.renderIntoDocument（组件）；
expect（component.toBeTruthy（）；
});
});

---

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

@zemirico的答案对我不适用，而且有点过时

这是我自己的设置，您可以将其用于

karma.conf.js

：

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

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

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

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

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

它使用

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

演示

---

.

你是否使用webpack来构建你的资产？我有一篇关于如何使用webpack作为测试的预处理器来设置Karma的帖子：老实说，我从来没有尝试过单独使用babel。我使用

browserify

和

babelify

。你的项目似乎处理JSX，但不是ES6。这只是webpack中的一个调整吗（我没有使用webpack）？karma不应该加载输出JS文件而不是输入JSX吗？（我不熟悉JSX，但之前已经设置过类似的ES6/Babel项目）这是一种可能性，但你必须在测试之前进行构建。这样，karma就完成了所有工作！很好！本周我将有时间进行实验。所以我很快会发布我的发现！我已经测试过了，现在它可以在Chrome上运行。非常感谢！！@JeanlucaScaljeri你能把你的工作配置文件放在gist上或其他地方看看吗？w你为什么使用

var

而不是

let

？