Testing react form - AssertionError - reactjs

Question

I'm trying to test a click on a react component that renders a form, however it fails the third test with the following error
AssertionError: expected [Function: proxy] to have a property 'callCount' of 1, but got 0
Here's the test i wrote:
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);
});
});
and the component itself:
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;
What i am trying to do here is that i want to test that when the login button is clicked, the onSubmit handler is called. What am i doing on here?

Answer 1

Try to submit form this way:
wrapper.find("form").simulate("submit");