title: Testing a nested async call react component
body: <p>I have the following component with a react hook containing a nested async call written in typescript.</p>
  <pre><code>const sampleComponent: FunctionComponent = (): ReactElement =&gt; {
      const [ detail, setDetail ] = useState&lt;detailObject&gt;(undefined);
  
      useEffect(() =&gt; {
          getConfigs();
      }, [ detail != undefined ]);
  
      const getConfigs = () =&gt; {
          getConfig().then((configResp: any) =&gt; {
              if(response.status === 200) {
                  getConfigDetail(configResp.data.id).then((response) =&gt; {
                      if(response.status === 200) {
                          setDetail(response.data)
                      }
                  })
              }
          })
      }
  
      return (
          //Some UI related to the responses.
      )
  }
  </code></pre>
  <p>I test this with the following test.</p>
  <pre><code>const configList = jest.spyOn(api, &quot;getConfigList&quot;);
  const configDetail = jest.spyOn(api, &quot;getConfig&quot;);
  
  configList.mockImplementation(() =&gt; {
      return Promise.resolve(configListRequestResponse); // these are sample responses
  });
  
  configDetail.mockImplementation(() =&gt; {
      return Promise.resolve(configDetailsRequestResponse); // these are sample responses
  })
  
  test(&quot;Test proper rendering config component&quot;, async () =&gt; {
     await act(async () =&gt; {
        render(
            &lt;Provider store={ store }&gt;
                &lt;sampleComponent/&gt;
            &lt;/Provider&gt;
        );
        await waitFor(() =&gt; expect(configList).toHaveBeenCalledTimes(1));
        await waitFor(() =&gt; expect(configDetail).toHaveBeenCalledTimes(1));
        expect(screen.getByTestId(&quot;remote-configs&quot;)).toBeInTheDocument();
     });
  });
  </code></pre>
  <p>When I run this test, I get the following error.</p>
  <blockquote>
  <p>Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.</p>
  </blockquote>
  <pre><code>    &gt; 95 |       setDetail(response.data);
           |       ^
  </code></pre>
  <p>What am I doing wrong here?</p>