title: Testing method inside functional component in React using Jest / Enzyme
body: <p>Following is my React Functional Component which I am trying to test using <code>jest</code> / <code>enzyme</code>.</p>
  
  <p>React Functional Component Code - </p>
  
  <pre><code>export const UserForm = props =&gt; {
      const {labels, formFields, errorMessages} = props;
      const [showModal, setShowModal] = React.useState(false);
      const [newId, setNewId] = React.useState('');
  
      const showModal = () =&gt; {
          setShowModal(true);
      }
  
      const closeModal = () =&gt; {
          setShowModal(false);
      };
  
      const handleSubmit = data =&gt; {
          Post(url, data)
              .then(resp =&gt; {
                  const userData = resp.data;
                  setNewId(() =&gt; userData.id);
                  showModal();
              })
      }
  
      return (
          &lt;div className="user-form"&gt;
              &lt;UserForm
                  fields={formFields}
                  handleSubmit={handleSubmit}
                  labels={labels}
                  errors={errorMessages}
              /&gt;
              {showModal &amp;&amp; &lt;Modal closeModal={closeModal}&gt;
                  &lt;div className=""&gt;
                      &lt;h3&gt;Your new id is - {newId}&lt;/h3&gt;
                      &lt;Button
                          type="button"
                          buttonLabel="Close"
                          handleClick={closeModal}
                          classes="btn btn-close"
                      /&gt;
                  &lt;/div&gt;
              &lt;/Modal&gt;}
          &lt;/div&gt;
      )
  };
  </code></pre>
  
  <p>Now I am trying to test <code>showModal</code>, <code>closeModal</code> and <code>handleSubmit</code> method, but my tests are failing. Let me know the correct way of testing React Hooks and methods inside functional component.</p>
  
  <p>My test case -</p>
  
  <pre><code>import React from 'react';
  import { UserForm } from '../index';
  import { shallow } from 'enzyme';
  
  describe('&lt;UserForm /&gt;', () =&gt; {
      let wrapper;
      const labels = {
          success: 'Success Message'
      };
      const formFields = [];
      const errorMessages = {
          labels: {
              firstName: 'First Name Missing'
          }
      };
  
      function renderShallow() {
          wrapper = shallow(&lt;UserForm
              labels={labels}
              formFields={formFields}
              errorMessages={errorMessages}
          /&gt;);
      }
      it('should render with props(snapshot)', () =&gt; {
          renderShallow();
          expect(wrapper).toMatchSnapshot();
      });
  
      it('should test showModal method', () =&gt; {
          const mockSetShowModal = jest.fn();
          React.useState = jest.fn(() =&gt; [false, mockSetShowModal]);
  
          renderShallow();
          expect(mockSetShowModal).toHaveBeenCalledWith(true);
      });
  });
  </code></pre>
  
  <p>Error I am getting -</p>
  
  <pre><code>Expected mock function to have been called with:
        [true]
      But it was not called.
  </code></pre>
  
  <p>Let me know how can i test the <code>showModal</code>, <code>closeModal</code> and <code>handleSubmit</code> methods in a functional component.</p>