title: React Test Renderer: mocked async function calls don't render mocked return values
body: <p>I have a simple component that renders settings and has the following return body.</p>
  <pre><code>return (
      &lt;IonContent&gt;
        &lt;IonGrid&gt;
          &lt;IonRow className=&quot;ion-justify-content-center&quot;&gt;
            &lt;IonCol size=&quot;10&quot;&gt;
              {/*-- List of all settings available in the game --*/}
              &lt;IonList&gt;
                {settings.map((settingItem: SettingItem, index: number) =&gt; (
                  &lt;IonItem key={index}&gt;
                    &lt;IonLabel&gt;{settingItem.title}&lt;/IonLabel&gt;
                    &lt;IonToggle slot=&quot;end&quot;&gt;&lt;/IonToggle&gt;
                  &lt;/IonItem&gt;
                ))}
              &lt;/IonList&gt;
            &lt;/IonCol&gt;
          &lt;/IonRow&gt;
        &lt;/IonGrid&gt;
      &lt;/IonContent&gt;
    );
  </code></pre>
  <p>I use this function and useEffect to render data</p>
  <pre><code>const getSettings = async () =&gt; {
    const settings = await get(&quot;api/settings&quot;, token);
  
    if (settings) {
      setSettings(settings);
    }
  };
  
  useEffect(() =&gt; {
    getSettings();
  }, []);
  </code></pre>
  <p>For the life of me I cannot get my unit test to actually render the mock data to test this component. Note, my actual component works just fine. I believe it to simply be that I am not mocking the get function correctly to display the data.</p>
  <p>I have followed several different stack overflows and guides but not yield the data, just empty component, due to what appears to be settings never being returned.</p>
  <p>Here is the test:</p>
  <pre><code>jest.mock(&quot;../../utils/apiHelper/apiHelper&quot;, () =&gt; {
    return {
      get: jest.fn().mockImplementation(() =&gt; [
        {
          title: &quot;test 1&quot;,
        },
      ]),
    };
  });
  
  test(&quot;Displays Setting list&quot;, async () =&gt; {
    let component;
  
    act(async () =&gt; {
      component = await renderer.create(
        &lt;SettingsList cognitoUser={mockCognitoUser} /&gt;
      );
      let tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });
  });
  </code></pre>
  <p>My Snapshot is missing every part of the map functions though, suggesting there is no data to map at all.</p>
  <p>Here are the collection of things I have tried so far:
  <a href="https://jestjs.io/docs/mock-functions#mocking-modules" rel="nofollow noreferrer">https://jestjs.io/docs/mock-functions#mocking-modules</a></p>
  <p>I have tried mocking the return values, mocking implementation to a promise that gets resolved. I have tried a few variation on when and where I act() and not act()ing at all. I have tried asserting in the act outside the act.</p>
  <p>What am I missing?</p>