title: React mock asynchronous axios with jest doesn't work
body: <p>I'm trying to test the component below using mock axios, however, it looks like the  components are not rendered as expected, could someone help me on that? I have been stuck for quite a while. The component is fetching an api every 1 second.</p>
  <pre><code>const RealtimePrice = () =&gt; {
    var [cryptoFeed, setCryptoFeed] = useState&lt;cryptoFeed&gt;([]);
    var [currency, setCurrency] = useState(currencyList[0]);
    var [cryptoSearch, setCryptoSearch] = useState(&quot;&quot;);
  
    const url = `https://api.coingecko.com/api/v3/coins/markets?ids=${ids}&amp;vs_currency=${currency}`;
    const intervalRef = useRef&lt;NodeJS.Timer&gt;();
  
    const onCurrencyChangeHandler = useCallback((newValue: string) =&gt; {
      setCurrency(newValue);
    }, []);
  
    const onCryptoSearchChangeHandler = useCallback((newValue: string) =&gt; {
      setCryptoSearch(newValue);
    }, []);
  
    useEffect(() =&gt; {
      const getCryptoFeed = () =&gt; {
        axios.get(url).then((response: any) =&gt; {
          if (response.data) {
            console.debug(&quot;The state is set&quot;);
            setCryptoFeed(response.data);
          } else {
            console.debug(&quot;The state is not set&quot;);
            setCryptoFeed([]);
          }
        });
      };
  
      getCryptoFeed();
      intervalRef.current = setInterval(getCryptoFeed, 1000);
      return () =&gt; {
        clearInterval(intervalRef.current);
      };
    }, [url]);
  
    const priceBlocks = cryptoFeed
      .filter((crypto) =&gt;
        crypto.name.toLowerCase().includes(cryptoSearch.toLowerCase())
      )
      .map((crypto: any) =&gt; {
        return (
          &lt;PriceBlock
            key={crypto.id}
            id={crypto.id}
            name={crypto.name}
            price={crypto.current_price}
            volume={crypto.total_volume}
            change={crypto.price_change_24h}
          &gt;&lt;/PriceBlock&gt;
        );
      });
  
    return (
      &lt;div className={styles.container}&gt;
        &lt;div className={styles[&quot;header-section&quot;]}&gt;
          &lt;h1&gt;Cryptocurrency Realtime Price&lt;/h1&gt;
          &lt;div className=&quot;input-group&quot;&gt;
            &lt;Selectbox
              onChange={onCurrencyChangeHandler}
              defaultOption={currencyList[0]}
              options={currencyList}
            /&gt;
            &lt;Inputbox
              placeHolder=&quot;Enter crypto name&quot;
              onChange={onCryptoSearchChangeHandler}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className={styles.priceblocks}&gt;{priceBlocks}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>The test is the defined as the following, findByText gives error, it couldn't find the element.</p>
  <pre><code>import { render, screen } from &quot;@testing-library/react&quot;;
  import RealtimePrice from &quot;../RealtimePrice&quot;;
  
  describe(&quot;Realtime Price&quot;, () =&gt; {
    it(&quot;should render the Bitcoin price block&quot;, async () =&gt; {
      render(&lt;RealtimePrice /&gt;);
      const pb = await screen.findByText(&quot;Bitcoin&quot;);
      expect(pb).toBeInTheDocument();
    });
  });
  </code></pre>
  <p>And in package.json I have set</p>
  <pre><code>  &quot;jest&quot;: {
      &quot;collectCoverageFrom&quot;: [
        &quot;src/**/*.{js,jsx,ts,tsx}&quot;
      ],
      &quot;resetMocks&quot;: false
    }
  </code></pre>
  <p>In src/<strong>mocks</strong>/axios.js</p>
  <pre><code>const mockGetResponse = [
    {
      id: &quot;bitcoin&quot;,
      name: &quot;Bitcoin&quot;,
      price: 20000,
      volume: 12004041094,
      change: -12241,
    },
    {
      id: &quot;solana&quot;,
      name: &quot;Solana&quot;,
      price: 87,
      volume: 200876648,
      change: 122,
    },
  ];
  
  const mockResponse = {
    get: jest.fn().mockResolvedValue(mockGetResponse),
  };
  
  export default mockResponse;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/RQfsZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RQfsZ.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/kqS2Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kqS2Q.png" alt="enter image description here" /></a></p>