Unit testing 如何使用Sinon和Chai对表单进行单元测试

我正在使用柴、锡农和摩卡进行测试

我正在使用Redux表单和ReactJS

我想测试我在忘记密码页面上单击提交后会发生什么

以下是我目前的代码：

反应文件：

propTypes: {
    fields: React.PropTypes.object.isRequired,
    message: React.PropTypes.string.isRequired,
    handleSubmit: React.PropTypes.func.isRequired,


},

renderForm: function() {
    const { fields: {email}, handleSubmit, isFetching } = this.props;
    const iconClass = "fa fa-star-o";

    return(
      <form form="forgotPassword" name="forgotPassword" className="stack-input">
          <ReduxFormTextInput
              {...email}
              floatingLabelText="Email Address" />

          <div className="clearfix" />

          <div className="form-footer">
              <ButtonSpinner spinner={isFetching} onClick={handleSubmit} ripple={true} raised={true} primary={true} >
                  <i className={iconClass} />Send
              </ButtonSpinner>
          </div>
      </form>
    );

},

renderMessage: function() {
    return(
        <div>
            <i className="fa fa-exclamation-circle" style={{marginRight: '4px'}}/>
            If your email is in the system, then it will be sent.
        </div>
    );

},

//Checks if user has submitted email.
emailSubmit: function(){
    var locus = this, props = locus.props;
    if(props.message === ''){
        return null;
    }
    else if(props.message === 'SENT'){
        return true;
    }
    return null;
},


render(){

    var locus = this, props= locus.props;


    return(
          <div className="page-wrap">
            <div className="page-column">
                <h2>Forgot Your Password</h2>
                {this.emailSubmit() ? this.renderMessage(): this.renderForm()}

            </div>
          </div>
        );
}

尽管多次尝试，该测试仍会失败。我没有使用Spy（）的经验，因此我不确定是否应该使用calledWith

it ('should display "If your email is in the system, then it will be sent." on submit', () => {

        TestUtils.Simulate.change(emailInput, {target: {value: 'test@email.com'}});
        TestUtils.Simulate.click(submitButton);
        expect(domColumn.text).to.equal("Forgot Your Password");
    });

这就是我得到的回应

+"If your email is in the system, then it will be sent."
-  -"Forgot Your PasswordSend"

我使用innerHTML来了解点击后填充的内容，我甚至不认为点击是注册的

---

当我尝试执行

TestUtils.Simulate.change（emailInput，{target:{value:'test@email.com'}});，它不工作。我必须在组件中填充电子邮件的值
 您应该将
handleSubmit
spy赋值给一个常量，这样您至少可以检查它是否被调用。（其他间谍可能也是如此）

现在您可以检查
expect（handleSubmitSpy）.toHaveBeenCalled（）

+"If your email is in the system, then it will be sent."
-  -"Forgot Your PasswordSend"

const handleSubmitSpy = spy()
const component = setup({
        ...
        handleSubmit: handleSubmitSpy