title: React Testing Library Warning: Can't perform a React state update on an unmounted component
body: <p>I am getting an error when running my code coverage tests using React Testing Library.  I believe I am getting the error because my tests are unmounting before the state update is triggered in my component.</p>
  <pre><code>  const {
      personSuccessAlert,
      setPersonSuccessAlert,
      updatePersonSuccessAlert,
      setUpdatePersonSuccessAlert,
    } = useContext(PeopleContext);
  
    useEffect(() =&gt; {
      setTimeout(() =&gt; {
        setPersonSuccessAlert(false);
        setUpdatePersonSuccessAlert(false);
      }, 3000);
    }, [peopleData, updatePersonSuccessAlert]);
  </code></pre>
  <p>My useEffect has a 3 second timeout before calling two functions will will update the state in context.</p>
  <pre><code>import React, { createContext, useState } from 'react';
  
  export const PeopleContext = createContext();
  
  const PeopleContextProvider = ({
    children,
    initialPersonSuccessAlert = false,
    initialEditSuccessAlert = false,
  }) =&gt; {
    const [personSuccessAlert, setPersonSuccessAlert] = useState(
      initialPersonSuccessAlert,
    );
    const [updatePersonSuccessAlert, setUpdatePersonSuccessAlert] = useState(
      initialEditSuccessAlert,
    );
  
    return (
      &lt;PeopleContext.Provider
        value={{
          personSuccessAlert,
          updatePersonSuccessAlert,
          setPersonSuccessAlert,
          setUpdatePersonSuccessAlert,
        }}&gt;
        {children}
      &lt;/PeopleContext.Provider&gt;
    );
  };
  
  export default PeopleContextProvider;
  </code></pre>
  <p>I am trying to figure out how to either mock the two functions or keep my test mounted long enough for the state update.</p>
  <p>Here is what I am trying</p>
  <pre><code>  test('onClick of person name to route to person record view loading for person record', async () =&gt; {
      const history = createMemoryHistory();
      history.push('/people');
      const providerProps = { personSuccessAlert: true };
      const { getByText } = render(
        &lt;MockedProvider mocks={getPeople} addTypename={false}&gt;
          &lt;PeopleContextProvider {...providerProps}&gt;
            &lt;Router history={history}&gt;
              &lt;Switch&gt;
                &lt;Route exact path=&quot;/people&quot; component={People} /&gt;
                &lt;Route path=&quot;/people/:id&quot; component={PersonRecord} /&gt;
              &lt;/Switch&gt;
            &lt;/Router&gt;
          &lt;/PeopleContextProvider&gt;
        &lt;/MockedProvider&gt;,
      );
      expect(getByText('Loading')).toBeInTheDocument();  
      await act(async () =&gt; new Promise((resolve) =&gt; setTimeout(resolve, 3500)));
    });
  </code></pre>
  <p>I have tried setting <code>const setPersonSuccessAlert = jest.fn();</code> but haven't found success with that.</p>
  <p>Any ideas how to keep my component mounted?</p>