测试反应形式 - AssertionError

Question

我正在尝试测试对呈现表单的反应组件的点击，但是它未能通过第三次测试并出现以下错误

AssertionError: 预期 [Function: proxy] 的属性 'callCount' 为 1，但得到了 0

这是我写的测试：

form.test.js

describe('<Form />', () => {
  it('renders without exploding', () => {
    shallow(<Form />);
  });

  it('renders an `.login_form`', () => {
    const wrapper = shallow(<Form />);
    expect(wrapper.find('.login_form')).to.have.length(1);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(
      <Form handleSubmit={ onButtonClick } />,
   );
    wrapper.find('.submitBtn').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

以及组件本身：

form.jsx

function Form(props) {
  return (
    <form onSubmit={ props.handleSubmit } className='form-horizontal login_form'>
      <div className='form-group'>
        <div className='col-md-offset-4 col-md-4 col-xs-12'>
          <input className='form-control' type='text' id='username' value={ props.username } onChange={ props.handleUsername } placeholder='Username' required />
        </div>
      </div>
      <div className='form-group'>
        <div className='col-md-offset-4 col-md-4 col-xs-12'>
          <input className='form-control' type='password' id='password' value={ props.password } onChange={ props.handlePassword } placeholder='Password' required />
        </div>
      </div>
      <div className='form-group'>
        <div className='col-md-offset-4 col-md-4 col-xs-12'>
          <button className='btn btn-block btn-default submit submitBtn' type='submit'>Log in</button>
              {
                 props.error !== '' &&
                 <p className='login_error no-margin'>
                   {props.error}
                 </p>
               }
        </div>
      </div>
    </form>
  );
}

Form.propTypes = {
  username: React.PropTypes.string,
  password: React.PropTypes.string,
  error: React.PropTypes.string,
  handleUsername: React.PropTypes.func,
  handlePassword: React.PropTypes.func,
  handleSubmit: React.PropTypes.func,
};

export default Form;

我在这里尝试做的是我想测试当点击登录按钮时，onSubmit 处理程序被调用。我在这里做什么？

Answer 1

尝试以这种方式提交表单：

wrapper.find("form").simulate("submit");