title: React jest test for useEffect on route change
body: <p>I have a tab-based page. Each tab will carry hashtag to switch tabs on click. I added <code>useEffect</code> to setValue in the state.</p>
  <p>PageManager File:</p>
  <pre><code>const RolePageManager = () =&gt; {
  let location = useLocation()
  let { uuid } = useParams()
  
  const [tabIndex, setTabIndex] = useState(0)
  
  useEffect(() =&gt; {
   if (location.hash) {
     switch (location.hash) {
       case '#role_info':
         setTabIndex(0)
         break
       case '#members':
         setTabIndex(1)
         break
       case '#permission':
         setTabIndex(2)
         break
       default:
         setTabIndex(0)
     }
   }
  }, [location.hash])
  ......
  </code></pre>
  <p>Test File:</p>
  <pre><code> const setState = jest.fn()
   const useStateSpy = jest.spyOn(React, 'useState')
   useStateSpy.mockImplementation((init) =&gt; [init, setState])
   const history = createMemoryHistory()
  
   it('something', () =&gt; {
     const wrapper = mount(
       &lt;Router history={history}&gt;
         &lt;RolePageManager /&gt;
       &lt;/Router&gt;
     )
     history.push('view/id/3#members')
     console.log(setState.mock)
   })
  </code></pre>
  <p>Issue:</p>
  <pre><code>  -&gt; state is not updating ::
    { calls: [], instances: [], invocationCallOrder: [], results: [] }
  </code></pre>
  <p>If I remove <code>useEffect</code> then it works nicely but it will be in the loop. That's why I want to use <code>useEffect</code> But failed to set state in the test.</p>
  <p>Did I miss anything ? or I should change something ?</p>