title: How can I test a React Hooks component by changing useState
body: <p>I have a React hooks functional component that I'd like to test with Jest/Enzyme.  I would like test its tertiary render behaviour based upon a useState value.  I can't seem to find any example online.  There is no 'click' to simulate - no API call to mock because at the end, I still need to test based upon the useState value.
  In the past, with class components, I could set the state.  With the new hooks, I can't.
  So, basically - how do I mock an async await inside a mocked submitForm function so that the render behaves properly?</p>
  
  <p>Here's my component:</p>
  
  <pre><code>import React, { useState } from 'react';
  import { Redirect } from 'react-router-dom';
  
  import Form from 'core/Form';
  
  export const Parent = ({submitForm}) =&gt; {
    const [formValues, setFormValues] = useState({});
    const [redirect, setRedirect] = useState(false);
  
    const handleChange = name =&gt; evt =&gt; {
      setFormValues({ ...formValues, [name]: evt.target.value });
    };
  
    const onSubmit = async () =&gt; {
        try {
          const res = await submitForm(formValues);
          if (res) setRedirect(true);
          else setRedirect(false);
        } catch (err) {
          console.log('Submit error: ', err);
        }
    };
  
    return redirect ? (
      &lt;Redirect push to={path} /&gt;
    ) : (
      &lt;Form onSubmit={onSubmit} values={formValues} onChange={handleChange} /&gt;
    );
  };
  
  export default Parent;
  </code></pre>
  
  <p>Here's my testing so far:</p>
  
  <pre><code>import React from 'react';
  import { shallow } from 'enzyme';
  import { Redirect } from 'react-router-dom';
  
  import Parent from './Parent';
  import Form from 'core/Form';
  
  let wrapper, props;
  .
  .
  .
  
  describe('&lt;Parent /&gt; rendering', () =&gt; {
    beforeEach(() =&gt; {
      props = createTestProps();
      wrapper = shallow(&lt;Parent {...props} /&gt;);
    });
  
    afterEach(() =&gt; {
      jest.clearAllMocks();
    });
  
    const setState = jest.fn();
    const useStateSpy = jest.spyOn(React, 'useState');
    useStateSpy.mockImplementation(init =&gt; [init, setState]);
  
    it('Should render 1 Form', () =&gt; {
      expect(wrapper.find(Form)).toHaveLength(1);
    });
  
    it('renders Redirect after API call', () =&gt; {
      setRedirect = jest.fn(() =&gt; false);
  
      expect(wrapper.find(Redirect)).toHaveLength(1);
    });
  
    it('renders Form before API call', () =&gt; {
      setRedirect = jest.fn(() =&gt; true);
  
      expect(wrapper.find(Form)).toHaveLength(1);
    });
  });
  </code></pre>