title: How to use jest.spyOn with React function component using Typescript
body: <p>I am developing a React app using Typescript, and hooks, and I am trying to use Enzyme with Jest to test the function components. I am unable to use jest.spyOn to test a method in my component. The jest.spyOn method doesn't resolve correctly and shows following message on hover </p>
  
  <blockquote>
    <p>"Argument of type '"validateBeforeSave"' is not assignable to
    parameter of type '"context" | "setState" | "forceUpdate" | "render" |
    "componentDidMount" | "shouldComponentUpdate" | "componentWillUnmount"
    | "componentDidCatch" | "getSnapshotBeforeUpdate" | ... 6 more ... |
    "UNSAFE_componentWillUpdate"'.ts(2345)"</p>
  </blockquote>
  
  <p>I tried to cast the instance as 'Any' - </p>
  
  <pre><code>const instance = wrapper.instance() as any;
  </code></pre>
  
  <p>This of course ignores the problem at compile time, but then the test throws a runtime error that function does not exist on component. </p>
  
  <blockquote>
    <p>Cannot spy the validateBeforeSave property because it is not a
    function; undefined given instead</p>
  </blockquote>
  
  <pre><code>// Some function Component
  
  const SomeComponent = (props: IMyComponentProps) =&gt; {
    const { classes } = props;
  
    // Component has state
    const [count, setCount] = useState(0);
  
    function validateBeforeSave(){
  
    }
  
    function handleClick() {
    validateBeforeSave();
    .
    .
    .
    }
  
    return (
     &lt;div&gt;
        &lt;Button&gt;
        className="saveBtn"
        onClick={handleClick}
        &lt;/Button&gt;
      &lt;/div&gt;
    );
  
    };
  
    // Unit test
    describe('SomeComponent' () =&gt; {
    it('validates model on button click', () =&gt; {
        const wrapper = mount(
          &lt;MuiThemeProvider theme={theme}&gt;
            &lt;SomeComponent/&gt;
          &lt;/MuiThemeProvider&gt;,
        );
    const instance = wrapper.instance();
        const spy = jest.spyOn(instance, "validateBeforeSave");
    wrapper
          .find('.saveBtn')
          .at(0)
          .simulate('click');
        expect(spy).toHaveBeenCalledTimes(1);
      });
    }
  </code></pre>
  
  <p>What am I missing here? How does spyOn work with function components?</p>
  
  <p>I created the app using the create-react-app template and it has these dependencies for test packages</p>
  
  <pre><code>"devDependencies": {
      "ts-jest": "^23.10.3",
      "@types/jest": "24.0.9",
      "@types/enzyme": "^3.9.1",
      "@types/enzyme-adapter-react-16": "^1.0.2",
      "enzyme": "^3.9.0",
      "enzyme-adapter-react-16": "^1.11.2",
      "enzyme-to-json": "^3.3.5",
    }
  </code></pre>