title: Enzyme is not testing onChange method
body: <p>I'm trying to test, by passing mock data the on change method for App.test.js, however im getting the following error.</p>
  
  <blockquote>
    <p>● Should handle onChange event › should handle onChange event</p>
  
  <pre><code>expect(received).toEqual(expected)
  
  Expected value to equal:
    "Owl"
  Received:
    undefined
  
  Difference:
  
    Comparing two different types of values. Expected string but received undefined.
  </code></pre>
  </blockquote>
  
  <p>i checked out a similar post</p>
  
  <p><a href="https://stackoverflow.com/questions/54789468/onchange-testing-using-jest-enzyme-check">onChange - Testing using Jest Enzyme - check?</a>, however their wasn't an answer that could help </p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import logo from './logo.svg';
  import './App.css';
  import Card from './Card';
  import PropTypes from "prop-types";
  const Styles = {
      marginTop: '100px',
      inputStyle: {
          borderRadius: '0px',
          border: 'none',
          borderBottom: '2px solid #000',
          outline: 'none',
          focus: 'none'
      }
  }
  class App extends Component {
      constructor(props) {
          super(props);
          this.state = {
              query: '',
              title: undefined,
              url: undefined
          }
          this.onChange = this.onChange.bind(this);
      }
      onChange(e) {
          this.setState({query: e.target.value})
      }
      getGIY = async(e) =&gt; {
          e.preventDefault();
          const { query } = this.state;
          await fetch(`http://api.giphy.com/v1/gifs/search?q=${query}&amp;api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&amp;limit=5`)
          .then(response =&gt; response.json())
          .then(({ data }) =&gt; {
            this.setState({
              title: data[0].title,
              url: data[0].images.downsized.url
            });
          })
          .catch(console.log);
      }
      render() {
          return (
              &lt;div className="col-md-6 mx-auto" style={Styles}&gt;
                  &lt;h1 className="gif-title"&gt;Random GIF fetch&lt;/h1&gt;
                  &lt;form className="form-group" onSubmit={this.getGIY}&gt;
                      &lt;input
                          style={Styles.inputStyle}
                          className="form-control"
                          type="text"
                          name="query"
                          onChange={this.onChange}
                          placeholder="Search GIF..."/&gt;
                      &lt;button type="submit" className="btn btn-primary mt-4"&gt;Get GIF&lt;/button&gt;
                  &lt;/form&gt;
                  &lt;Card title={this.state.title} url={this.state.url}/&gt;
              &lt;/div&gt;
          );
      }
  }
  PropTypes.propTypes = {
      onChange: PropTypes.func.isRequired,
      getGIY:PropTypes.func.isRequired,
      title:PropTypes.string.isRequired,
      url:PropTypes.string.isRequired
  }
  export default App;
  </code></pre>
  
  <p><strong>App.test.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {shallow} from 'enzyme';
  import App from './App';
  
  
  describe('Should render App Component', ()=&gt; {
    it('should render app component', ()=&gt; {
      const component = shallow(&lt;App /&gt;);
    })
  })
  
  describe('Should have h1 title', ()=&gt; {
    it('Should show Random GIF fetch', ()=&gt;{
      const component = shallow(&lt;App/&gt;);
  
      expect(component.find("h1.gif-title")).toHaveLength(1);
      expect(component.find("h1.gif-title").text()).toContain("Random GIF fetch")
    })
  })
  
  
  
  describe('Should handle onChange event', ()=&gt; {
    it('should handle onChange event', ()=&gt; {
      const component = shallow(&lt;App/&gt;)
      const form = component.find('input')
  
      form.props().onChange({
        target:{
          title: 'Owl',
          query: 'Owl',
          url: 'https://media.giphy.com/media/qISaMW1xwmvNS/giphy.gif'
        }
      });
      expect(component.state('query')).toEqual('Owl')
  
    })
  })
  </code></pre>