vendredi 27 mai 2016

ReactJS: unit test state changes with nested component and common state

I'm trying to unit test a click behavior in a component that is binding its updateState from a parent component, but I am unable to figure out how this is done.

var ParentComponent = React.createClass({
  getInitialState: function() {
    return {clicked:false;}
  }
  updateState: function(newState) {
    this.setState(newState);
  },
  render: function() {
    <ChildComponent appState={this.state} updateState={this.updateState} />
  }
});

var ChildComponent = React.createClass({
  updateState: function() {
    this.props.updateState({clicked:true})
  }
  render: function() {
    <a ref="clicky" onClick={this.updateState}>Update the parent state</a>
  }
});

and in my mocha test:

var appState = {clicked:false};
var updateState= function(newState) {this.setState(newState)};
var component = ReactTestUtils.renderIntoDocument(<ChildComponent appState={appSstate} updateState={updateState} />);
console.log("BEFORE:",component.props.appState);

// click the simple layout preset in the dropdown
var clicky = component.refs.clicky;
ReactTestUtils.Simulate.click(clicky);

console.log("AFTER:",component.props.appState);

I get the following error when the unit test runs:

TypeError: this.setState is not a function

How can i use the same function that exists in the ParentComponent?

Edit: forgot to mention that ParentComponent and ChildComponent are defined as separate modules.

Aucun commentaire:

Enregistrer un commentaire