Как модульный тест реагирует на код JSX ES6 с помощью KARMA?

Я написал свое приложение React с ES6. Теперь я хотел бы написать свои тесты также с ES6. Поэтому задача здесь-настроить карму.

Вместе с google я зашел так далеко с кармой.конфиг.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, например. Но нет, вот он. вывод из кармы, когда я ее запускаю: 
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

Строка 35 из app.jsx содержит фактическую часть JSX. Так что, по какой-то причине препроцессоры, похоже, делают не так уж и много. Любая помощь с препроцессорами была бы признательна ?

Обновление: у меня это почти рабочий ног. Оказывается, что препроцессоры, которые у меня были, должны быть заменены следующим образом 

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

Теперь, когда я запускаю это, я получаю: 

Uncaught ReferenceError: require is not defined

Я думал, что у меня есть полифилл для этого : (

2 8
javascript reactjs react-jsx babeljs karma-runner

2 ответа:

Я использую ES6 с Browserify и JSX. Для компиляции я использую Вавилон. Следующая конфигурация работает для меня.

Карма.конф.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']
},
...

__тесты__ / компонент-тест.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();
  });

});
Если у вас есть какие-либо вопросы, дайте мне знать.
5

@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"
  }

Использование

Создайте новый компонент React в src/my-element.jsx: 

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 .

4