title: Cannot read property 'target' of undefined when testing useState
body: <p>I'm trying to these state methods when passing state from parent component to child component</p>
  
  <pre><code>const [bio, setBio] = useState("");
  const [gravatar, setGravatar] = useState("");
  </code></pre>
  
  <p>but im getting this error </p>
  
  <blockquote>
    <p>✓ Should check if EditProfile renders child component (2ms)
        ✕ should test bio state (4ms)</p>
    
    <p>● Should render  › should test bio state</p>
  
  <pre><code>TypeError: Cannot read property 'target' of undefined
  </code></pre>
  </blockquote>
  
  <p>When this test is called, What am i doing wrong ? thanks. </p>
  
  <pre><code> it("should test bio state", () =&gt; {
          wrapper
              .find("EditProfileForm")
              .props()
              .handleBio();
          expect(setState).toHaveBeenCalledWith("set bio");
      });
  </code></pre>
  
  <p><strong>editProfile.test.tsx</strong></p>
  
  <pre><code>import React from "react";
  import EditProfile from "./editProfile";
  import { shallow, mount, render } from "enzyme";
  import EditProfileForm from "../forms/editProfile/editForm";
  import { createShallow } from "@material-ui/core/test-utils";
  import { Provider } from "react-redux";
  import { store } from "../../store";
  
  describe("Should render &lt;EditProfile/&gt;", () =&gt; {
      let wrapper;
      const setState = jest.fn();
      const useStateSpy = jest.spyOn(React, "useState");
      useStateSpy.mockImplementation((init) =&gt; [init, setState]);
  
      beforeAll(() =&gt; {
          wrapper = mount(
              &lt;Provider store={store}&gt;
                  &lt;EditProfile /&gt;
              &lt;/Provider&gt;,
          );
      });
  
      it("Should render &lt;EditProfile/&gt;", () =&gt; {
          expect(wrapper).toHaveLength(1);
      });
  
      it("Should check if EditProfile renders child component", () =&gt; {
          expect(wrapper.find("EditProfileForm")).toHaveLength(1);
      });
  
      it("should test bio state", () =&gt; {
          wrapper
              .find("EditProfileForm")
              .props()
              .handleBio();
          expect(setState).toHaveBeenCalledWith("set bio");
      });
  });
  </code></pre>
  
  <p><strong>editProfile.tsx</strong></p>
  
  <pre><code>import React, { useEffect, Component, useRef, useState } from "react";
  import Typography from "@material-ui/core/Typography";
  import EditProfileForm from "../forms/editProfile/editForm";
  import GridHoc from "../hoc/grid";
  import { Grid } from "@material-ui/core";
  import storeMethods from "../../common/storeHooks";
  
  function EditProfile(props: any) {
      const [bio, setBio] = useState("");
      const [gravatar, setGravatar] = useState("");
      const mounted = useRef&lt;Object&gt;();
      const { getProfile, profileData, userErr, message, updateProfile } = storeMethods();
      useEffect(() =&gt; {
          if (!mounted.current) {
              getProfile();
              mounted.current = true;
          } else {
              setBio(bio ? bio : profileData.bio);
              setGravatar(gravatar ? gravatar : profileData.gravatar);
          }
      });
      const handleSubmit = (e: any) =&gt; {
          e.preventDefault();
          const formData = {
              bio,
              gravatar,
          };
          updateProfile(formData);
      };
  
      return (
          &lt;Grid container={true} justify="center"&gt;
              &lt;Grid item={true} xs={12} sm={12} md={8} lg={8}&gt;
                  {userErr &amp;&amp; &lt;Typography style={{ color: "red" }}&gt;{message || userErr}&lt;/Typography&gt;}
                  {message &amp;&amp; &lt;Typography style={{ color: "green" }}&gt;{message || userErr}&lt;/Typography&gt;}
                  &lt;EditProfileForm handleBio={(e) =&gt; setBio(e.target.value)} handleGravatar={(e) =&gt; setGravatar(e.target.value)} onSubmit={handleSubmit} bio={bio} gravatar={gravatar} /&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
      );
  }
  
  export default GridHoc(EditProfile);
  </code></pre>
  
  <p><strong>editProfileForm</strong></p>
  
  <pre><code>import Button from "@material-ui/core/Button";
  import FormGroup from "@material-ui/core/FormGroup";
  import FormLabel from "@material-ui/core/FormLabel";
  import TextField from "@material-ui/core/TextField";
  import Typography from "@material-ui/core/Typography";
  import React from "react";
  const EditProfileForm = (props: any) =&gt; (
      &lt;form onSubmit={props.onSubmit}&gt;
          &lt;Typography variant="h5"&gt;Edit Profile&lt;/Typography&gt;
          &lt;FormGroup style={{ padding: "30px 0px" }}&gt;
              &lt;FormLabel style={{ display: "block" }}&gt;Bio&lt;/FormLabel&gt;
              &lt;TextField
                  id="outlined-name"
                  style={{
                      width: "100%",
                  }}
                  name="bio"
                  multiline={true}
                  rows="3"
                  defaultValue={props.bio}
                  onChange={props.handleBio}
                  margin="normal"
                  variant="outlined"
              /&gt;
              &lt;FormLabel style={{ display: "block" }}&gt;Gravatar&lt;/FormLabel&gt;
              &lt;TextField
                  id="outlined-name"
                  style={{
                      width: "100%",
                  }}
                  name="gravatar"
                  multiline={true}
                  rows="3"
                  onChange={props.handleGravatar}
                  defaultValue={props.gravatar}
                  margin="normal"
                  variant="outlined"
              /&gt;
          &lt;/FormGroup&gt;
          &lt;Button className="subBtn" variant="outlined" color="primary" type="submit"&gt;
              Submit
          &lt;/Button&gt;
      &lt;/form&gt;
  );
  
  export default EditProfileForm;
  </code></pre>