0
У меня есть модульное тестирование в мокко для среагировать компонента, который работает:Противоречивые Неожиданное Токен: <
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');
});
});
мокко сделок с ним хорошо и два теста пройти.
А потом у меня есть еще один тест, где я просто изменить название из компонента и добавить немного различную функциональность:
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");
});
Но вместо того чтобы работать, это возвращает следующее сообщение об ошибке:
<AllocationChart
^
Warning: Unexpected token < Use --force to continue.
Aborted due to warnings.
И я понятия не имею, как и почему и как это может произойти.
Что вы используете для преобразования JSX в JavaScript? –
Я следую схеме compiler.js здесь: http://www.hammerlab.org/2015/02/14/testing-react-web-apps-with-mocha/ – Elijah
Нет ничего плохого в вашем коде до тех пор, пока Я могу сказать; моя лучшая догадка заключается в том, что JSX для второго файла не преобразуется в JavaScript до того, как он доберется до Mocha. –