title: Enzyme simulate.('change', event) not working
body: <p>I am trying to perform unit test for my react app using karma/jasmine. The test is to check whether the state has changed or not. I have gone through several references but can't seem to work out the problem. Besides, spyOn() and sinon.spy() are giving erroneous output.</p>
  
  <pre><code>expect(received).toBe(expected)
  
  Expected value to be (using ===):
    true
  Received:
    false
  </code></pre>
  
  <blockquote>
    <p>test-snippet</p>
  </blockquote>
  
  <pre><code>        it('should call handleUserIdChange', () =&gt; {
              const value = '00000000';
              const mountedComponentHandle = mount(&lt;LoginForm /&gt;);
              const onChangeUserID = sinon.spy(mountedComponentHandle.instance(), 'handleUserIdChange');
              mountedComponentHandle.update();
              (mountedComponentHandle.find('ValidatedInput').at(0)).simulate('change', value);
              expect(
                  onChangeUserID.calledOnce
              ).toBe(true);
          });
  </code></pre>
  
  <blockquote>
    <p>Login.js for which tests are written</p>
  </blockquote>
  
  <pre><code>class LoginForm extends Component {
      constructor(props) {
          super(props);
          this.state = {
              userId : '',
              password : '',
              loginType : ['Customer', 'Payer', 'Super-User'],
              userType : 'Customer',
              isLoggedIn : false,
              loginResponse : '',
              FieldsRegister : [],
          }
          this.handleClearForm = this.handleClearForm.bind(this);
          this.handleSubmitForm = this.handleSubmitForm.bind(this);
          this.handleUserIdChange = this.handleUserIdChange.bind(this);
          this.handlePasswordChange = this.handlePasswordChange.bind(this);
          this.handleUserTypeChangeSelect = this.handleUserTypeChangeSelect.bind(this);
          this.handleRegisterFormFields = this.handleRegisterFormFields.bind(this);
      }
  
      handleUserIdChange(value) {
          this.setState({ userId : value });
      }
  
      handlePasswordChange(value) {
          this.setState({ password : value });
      }
      ....
      render() {
          return (
              &lt;form className="container form-horizontal"  onSubmit={this.handleSubmitForm}&gt;
                &lt;div className=" pb-10"&gt;
                  &lt;h2 className="text-center"&gt;Login&lt;/h2&gt;
                &lt;/div&gt;
                &lt;div className='column text-center'&gt;
                  &lt;span&gt;{this.state.loginResponse}&lt;/span&gt;
                &lt;/div&gt;
                  &lt;ValidatedInput
                      name={'userId'}
                      type={'text'}
                      title={'User ID'}
                      value={this.state.userId}
                      placeholder={'Enter User ID'}
                      onChange={this.handleUserIdChange}
                      onComponentMounted={this.handleRegisterFormFields}
                      validations={/^[0-9]{4,10}$/}
                      validationError={'This is not valid user Id'}
                      isRequired={true}
                  /&gt;
  ....
  </code></pre>
  
  <blockquote>
    <p>ValidateInput.js</p>
  </blockquote>
  
  <pre><code>class ValidatedInput extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              validations: this.props.validations,
              validationError: this.props.validationError
          };
  
          this.handleChangeValue = this.handleChangeValue.bind(this);
          this.isValid = this.isValid.bind(this);
          this.validateInput = this.validateInput.bind(this);
      }
  
      handleChangeValue(e) {
          this.props.onChange(e.target.value);
          var isValidField = this.isValid(e.target);
      }
  ....
  render () {
          return (
              &lt;div className="form-group"&gt;
                  &lt;div className="col-5 text-center"&gt;
                      &lt;label htmlFor={this.props.name}&gt;{this.props.title}&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className="col-5 text-center"&gt;
                      &lt;input
                          className="form-input text-center"
                          type={this.props.type}
                          ref={this.props.name}
                          name={this.props.name}
                          value={this.props.value}
                          required={this.props.isRequired}
                          placeholder={this.props.placeholder}
                          onChange={this.handleChangeValue}
                      /&gt;
                      &lt;span className='Error'&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  </code></pre>
  
  <p>Any help regarding how to check whether <code>state.userId</code> has changed or not and suggestions on how to get the test to pass?
  Thanks</p>