使用Jest(onChange)测试React组件

时间:2019-03-01 07:36:41

标签: javascript reactjs

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: undefined,
      startDate: new Date(),
      endDate: new Date()
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleNameInput = this.handleNameInput.bind(this);
  };
  
  handleSubmit() {
    this.submitData();
  }

  handleNameInput(e) {
      this.setState({ name: e.target.value})
  }
  
  onChangeStartDate = date => this.setState({ startDate:date })
  onChangeEndDate = date => this.setState({ endDate:date })


  render() {
    const { classes, ...rest } = this.props;
    return <div>
      <div className={classes.container}>
        <GridContainer>
        <GridItem sm={12}>
            <h2 className={classes.textCenter}>Office Hour App</h2>
          </GridItem>
          <GridItem xs={12} sm={4} md={4} lg={3}>
            <CustomInput
                  id="regular"
                  inputProps={{
                    placeholder: "Instructor name"
                  }}
                  formControlProps={{
                    fullWidth: true
                  }}
                />
          </GridItem>
          <GridItem xs={12} sm={4} md={4} lg={3}>
            <h3 className={classes.textCenter}>Start time</h3>
            <DateTimePicker
          onChange={this.onChangeStartDate}
          value={this.state.startDate}
        />
          </GridItem>
          <GridItem xs={12} sm={4} md={4} lg={3}>
            <h3 className={classes.textCenter}>End time</h3>
            <DateTimePicker
          onChange={this.onChangeEndDate}
          value={this.state.endDate}
        />
          </GridItem>
          <GridItem xs={12} sm={4} md={4} lg={3}>
          <Button
                color="primary"
                size="lg"
                onClick={this.handleSubmit}>
                Book
              </Button>
          </GridItem>
        </GridContainer>
      </div>
    </div>;
  }
}

对不起,但是我刚开始使用Jest进行测试。我想设置开始和结束日期的值,然后运行handlesubmit?本质上,目标是在句柄提交中添加错误检查,以查看结束日期是否早于开始日期,然后它将引发错误。

我将如何去做?我已经搜索并尝试了不同的方法,但我只是遇到错误。

0 个答案:

没有答案
相关问题