Как проверить щелчок компонента, для которого требуется функция из родительского компонента?

Question

Я пытаюсь написать тесты для моего Reactjs приложения (я очень новичок в тестировании этого), но я не могу понять, как оно работает asp. Ниже мой компонент, который я хочу проверить, это handleRegisterFieldClick (). Я видел примеры насмешек над функцией щелчка, но поскольку функция, которую мне нужно вызвать, передается из родительского компонента, как я могу смоделировать это? Я хочу проверить, если state.class = 'clickedSquare' после вызова handleRegisterFieldClick ().

export default class Square extends Component {
constructor(props) {
  super(props)
  this.state = {
    fieldcell: props.field,
    value: props.value,
    class: props.class,
    xPos: props.xPos,
    yPos: props.yPos,
    clicked: props.clicked
  }
  this.handleClick = this.handleClick.bind(this);
  this.handleRegisterFieldClick = this.handleRegisterFieldClick.bind(this);
}

handleClick() {
  if(this.state.fieldcell){
    if (this.props.clicked) {
      this.setState({
        class: 'square'
      })
    } else {
      this.setState({
        class: 'clickedSquare'
      })
    }
  }
}

handleRegisterFieldClick(){
  if(this.state.fieldcell){
    this.handleClick()
    var params = { 
      xPos: this.state.xPos,
      yPos: this.state.yPos
    }
    this.props.registerFieldClick(params)
  }
}



render() {

  return (
    <button className={this.state.class} onClick={this.handleRegisterFieldClick}  background={this.state.backgroundcolor}>
      {this.state.value !== 0 ? this.state.value : null}
    </button>
  );
}

}

Answer 1

Возможно, что-то вроде этого

const timeout = 'some value';
const timeout2 = 'some other value';

  componentDidMount() {
    setTimeout(() => {
      this.handleRegisterFieldClick();
      setTimeout(() => {
        //Since setState is asynchronous were using a second timeout
        //check the state.class condition here.
      }, timeout2);
    }, timeout);
  }