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

Question

我正在使用 Chai、Sinon 和 Mocha 进行测试。

我正在使用 Redux-Forms 和 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>
        );
}

单元测试文件：

describe('ForgotPasswordForm', () => {
    const component = setup({
            fields: {
                email: {

                    onChange: spy(),
                    onBlur: spy(),
                    onFocus: spy()
                }
            }, // React.PropTypes.object.isRequired,
            message: '', // React.PropTypes.string.isRequired,
            handleSubmit: spy() // React.PropTypes.func.isRequired,
            //onClearMessage:spy() //,  React.PropTypes.func.isRequired
        }),
        domRoot = TestUtils.findRenderedDOMComponentWithClass(component, 'page-wrap'),
        title = TestUtils.findRenderedDOMComponentWithTag(component, 'h2'),
        submitButton = TestUtils.findRenderedDOMComponentWithClass(component, 'material-D-button'),
        form = TestUtils.findRenderedDOMComponentWithTag(component, 'form'),
        inputs = TestUtils.scryRenderedDOMComponentsWithTag(component, 'input'),
        emailInput = inputs[0];

尽管进行了多次尝试，但此测试一直失败。我没有使用 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'}}); 时，它不起作用。我必须在组件中填充电子邮件的值。

Answer 1

您应该将 handleSubmit 间谍分配给一个常量，这样您至少可以检查它是否被调用。（其他间谍可能也一样）。

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

现在您可以查看 expect(handleSubmitSpy).toHaveBeenCalled()。

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

How to unit test forms with Sinon and Chai

unit-testing

sinon

chai

reactjs

redux