jeudi 17 septembre 2015

ReactJS testing failed on TestUtils.Simulate using karma

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