不一致的意外令牌：<

Question

我在 mocha 中对一个有效的 React 组件进行了单元测试：

var should = require('should');

require('./testdom')('<html><body></body></html>');

describe('update-button', function () {
  var queryA = {some object};
  var queryB = {some slightly different object};
  var reportA = {currentQuery: JSON.stringify(queryA)};
  var reportB = {currentQuery: JSON.stringify(queryB)};
  var React = require('react/addons');
  var TestUtils = React.addons.TestUtils;
  var UpdateButtons = require('../client/src/js/components/UpdateButtons');

  it('returns apply button', function() {

    var updateButton = TestUtils.renderIntoDocument(
      <UpdateButtons
        query={queryA}
        defaultQuery={JSON.stringify(queryB)}
        report={reportB} />
    );


    var update = TestUtils.findRenderedDOMComponentWithClass(updateButton, 'update');
    should.exist(update.getDOMNode().children);
    update.props.children.should.equal('Apply');

  });

  it('returns default button', function() {
    var updateButton = TestUtils.renderIntoDocument(
      <UpdateButtons
        query={queryB}
        defaultQuery={JSON.stringify(queryA)}
        report={reportB} />
    );

    var update = TestUtils.findRenderedDOMComponentWithClass(updateButton, 'setdefault');
    should.exist(update.getDOMNode().children);
    update.props.children.should.equal('Make Default');
  });

});

Mocha 处理得很好，两个测试都通过了。

然后我进行了另一个测试，我只是更改了组件的名称并添加了稍微不同的功能：

var should = require('should');

require('./testdom')('<html><body></body></html>');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var AllocationChart = require('../client/src/js/components/AllocationChart');

function emptyFunction() {
  return "fired";
}

describe('allocation-chart', function () {
  var values = [{"x":0,"y":0.0007445807134429661,"pvalue":0.23962495642627535},{"x":1,"y":0.0017470479717729415,"pvalue":0.06222155778588356},{"x":2,"y":0.001213604360619125,"pvalue":0.3751442982987042},{"x":3,"y":-0.0007938410728732803,"pvalue":0.6306601384568038},{"x":4,"y":-0.0013313112686847983,"pvalue":0.4930399112767866},{"x":5,"y":-0.0002447714978416893,"pvalue":0.906972528582401},{"x":6,"y":0.0008058818608920326,"pvalue":0.6581667787665311}];
  var valueExtent = [-0.5, 0.5];

  it('is created', function() {

    var sparkline = TestUtils.renderIntoDocument(
      <AllocationChart
        key={1}
        highlightbar={emptyFunction}
        newHighlightbar={emptyFunction}
        values={values}
        valueExtent={valueExtent}
        highlightRow={emptyFunction}
        deHighlightRow={emptyFunction} />
    );

    var chart = TestUtils.scryRenderedDOMComponentsWithClass(sparkline, 'allocationChart');
    chart.length.should.equal(1);
    should.exist(chart.getDOMNode());

    var sparklineBins = TestUtils.scryRenderedDOMComponentsWithClass(sparkline, 'sparklineBin');
    sparklineBins.length.should.equal(7);

  });

  it('fires a hover event', function() {
    var sparkline = TestUtils.renderIntoDocument(
      <AllocationChart
        key={1}
        highlightbar={emptyFunction}
        newHighlightbar={emptyFunction}
        values={values}
        valueExtent={valueExtent}
        highlightRow={emptyFunction}
        deHighlightRow={emptyFunction} />
    );

    var sparklineBins = TestUtils.scryRenderedDOMComponentsWithClass(sparkline, 'sparklineBin');

    var responseA = TestUtils.Simulate.mouseover(sparklineBins[0]);
    var responseB = TestUtils.Simulate.mouseout(sparklineBins[0]);

    responseA.should.equal("fired");
    responseB.should.equal("fired");

  });

但是这个 returns 没有工作，而是出现以下错误：

      <AllocationChart
      ^
Warning: Unexpected token < Use --force to continue.

Aborted due to warnings.

而且我不知道这会如何发生，为什么会发生。

Answer 1

hammerlab.org 中描述的编译 JSX 的方法将 compiler.js（通过 ReactTools.transform 处理 JSX 转换）与其他测试一起放在测试文件夹中。如果 React 测试按字母顺序排列在 compiler.js 之前，您将收到此错误，因为它在到达该测试时尚未注册。

Answer 2

以利亚。这是一个解决方案：

将 compiler.js 移出测试目录，这样 Mocha 就不会将其作为测试文件加载。
在测试目录中创建一个mocha.opts文件。它应该包含：

--compilers .:compiler.js

传递给--compilers的模块路径是相对于Mocha运行目录的。顺便说一下hammerlab.org很明显编译器是要使用--compilers加载的。使用 mocha.opts 避免每次都将参数传递给 RequireJS。

不一致的意外令牌：<

Inconsistent Unexpected Token: <

reactjs

mocha.js

react-jsx