title: Testing onChange function in Jest
body: <p>I'm relatively new to Jest and testing in general. I have a component with an input element:</p>
  
  <pre><code>import * as React from "react";
  
  export interface inputProps{
      placeholder: string;
      className: string;
      value: string;
      onSearch: (depID: string) =&gt; void;
  }
  
  onSearch(event: any){
      event.preventDefault();
      //the actual onclick event is in another Component
      this.props.onSearch(event.target.value.trim());
  }
  
  export class InputBox extends React.Component&lt;inputProps, searchState&gt; {
    render() {
          return (
              &lt;input
                  onChange={this.onSearch} //need to test this
                  className={this.props.className} 
                  type="text"
                  value={this.props.value}
                  placeholder={this.props.placeholder} /&gt;
          );
      }
  }
  </code></pre>
  
  <p>I want a test that checks that input element's <code>onChange</code> is a function that takes in the input element's <code>value</code> attribute as the parameter. This is how far I have gotten so far:</p>
  
  <pre><code>//test to see the input element's onchange 
  //returns a function that takes its value as a param
  it("onChange param is the same value as the input value", () =&gt; {
      const mockFn = jest.fn();
      const input = enzyme.shallow(&lt;InputBox 
                                      value="TestVal"
                                      placeholder="" 
                                      className="" 
                                      onSearch={mockFn}/&gt;);
  
  
         input.find('input').simulate('change',  { preventDefault() {} });
         expect(mockFn.mock.calls).toBe("TestVal");
      });
  </code></pre>
  
  <p>I am going off of the first solution here <a href="https://stackoverflow.com/questions/43747397/simulate-a-button-click-in-jest">Simulate a button click in Jest</a>
  And: <a href="https://facebook.github.io/jest/docs/en/mock-functions.html" rel="noreferrer">https://facebook.github.io/jest/docs/en/mock-functions.html</a></p>
  
  <p>Edit: Running the above throws the following error:</p>
  
  <pre><code> TypeError: Cannot read property 'value' of undefined
  </code></pre>