This is my first time to testing in ReactJS. But I get stuck on TestUtils.Simulate. I got error like this:
1) should render "--" when click "clear" button after value given
(Component) TransactionCheckout
RangeError: Maximum call stack size exceeded
at ReactDOMComponent.ReactMultiChild.Mixin.updateChildren (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:14590:14)
at ReactDOMComponent.Mixin._updateDOMChildren (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:11982:13)
at ReactDOMComponent.Mixin.updateComponent (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:11814:11)
at ReactDOMComponent.Mixin.receiveComponent (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:11770:11)
at Object.ReactReconciler.receiveComponent (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:6115:23)
at ReactCompositeComponentMixin._updateRenderedComponent (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:8082:24)
at ReactCompositeComponentMixin._performComponentUpdate (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:8064:11)
at ReactCompositeComponentMixin.updateComponent (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:7993:13)
at wrapper [as updateComponent] (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:5993:22)
at ReactCompositeComponentMixin.performUpdateIfNecessary (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:7941:13)
at Object.ReactReconciler.performUpdateIfNecessary (base/karma.entry.js?7cc933bd23e3a9ba06a1f25039de337df8af76d0:6130:23)
This below is my test file.
index.spec.js
import React from 'react';
import { findDOMNode } from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import TransactionCheckout from './index';
function renderWith (props = {}) {
return TestUtils.renderIntoDocument(<TransactionCheckout {...props} />);
}
describe('(Component) TransactionCheckout', () => {
const props = {
value: 15000,
onCheckout() {}
};
it('should render "--" after click "clear" button', () => {
const rendered = renderWith(props);
const total = TestUtils.findRenderedDOMComponentWithClass(
rendered,
'total'
);
const clearBtn = TestUtils.findRenderedDOMComponentWithClass(
rendered,
'clear'
);
// When I comment two lines below, my test is pass & doesn't throw error
TestUtils.Simulate.click(findDOMNode(rendered.refs.clear));
expect(total.textContent).to.equal('Total: --');
});
});
and below is TransactionCheckout component.
index.js
import React, { PropTypes } from 'react';
export default class TransactionCheckout extends React.Component {
static propTypes = {
value: PropTypes.number.isRequired,
onCheckout: PropTypes.func.isRequired,
onClear: PropTypes.func
}
state = {
value: 0
}
componentWillMount() {
this.setState({
value: this.props.value,
onClear: this.props.onClear || () => {
this.setState({ value: 0 });
}
});
}
componentWillUpdate(nextProps) {
this.setState({ value: nextProps.value });
}
renderMoney() {
const { value } = this.state;
if (!value) return '--';
return value.toString()
.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + ',-';
}
render () {
const { value, onClear } = this.state;
const doCheckout = this.props.onCheckout(value);
return (
<div className="transaction-checkout">
<p className="total">Total: {::this.renderMoney()}</p>
<span className="actions">
<a ref="checkout" className="checkout" onClick={doCheckout}>
Checkout
</a>
<a ref="clear" className="clear" onClick={onClear}>
Clear
</a>
</span>
</div>
);
}
}
dev dependencies:
"karma": "^0.13.8",
"karma-chrome-launcher": "^0.2.0",
"karma-mocha": "^0.2.0",
"karma-sinon-chai": "^1.0.0",
"karma-spec-reporter": "0.0.20",
"karma-webpack": "^1.7.0",
"mocha": "^2.2.5",
"phantomjs": "^1.9.17",
"phantomjs-polyfill": "0.0.1",
"react-addons-test-utils": "^0.14.0-rc1",
I'm very newbie on this manner. I hope somebody can guide me the right way. Thanks :)
Aucun commentaire:
Enregistrer un commentaire