title: Mocking api request with jest and react js
body: <p>I am testing api request call using jest and react testing library , here is my codes.</p>
  <p>Live demo <a href="https://codesandbox.io/s/mocking-api-request-zu2jx?file=/src/__test__/Home.test.js" rel="nofollow noreferrer">live demo</a></p>
  <p>utils/api.js</p>
  <pre><code>import axios from &quot;axios&quot;;
  
  const instance = axios.create({
    withCredentials: true,
    baseURL: process.env.REACT_APP_API_URL,
    headers: {
      Accept: &quot;application/json&quot;,
        &quot;Content-Type&quot;: &quot;application/json&quot;,
    },
  });
  
  export default instance;
  
  export async function get(url, params) {
    const response = await instance({
      method: &quot;GET&quot;,
      url: url,
      params: params,
    });
    return response;
  }
  </code></pre>
  <p><strong>mock</strong>/api.js</p>
  <pre><code>    const mockResponse = {
        data: {
          attributes: {
            first_name: &quot;Jeff&quot;,
            last_name: &quot;Bezo's&quot;,
          },
        },
      };
  
  export default {
    get: jest.fn().mockResolvedValue(mockResponse),
  };
  </code></pre>
  <p>Home.js</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  function Home() {
    const [user, setUser] = useState();
  
    const getUser = useCallback(async () =&gt; {
      try {
        const response = await api.get(&quot;/users/self&quot;);
        console.log(&quot;data response..&quot;, response.data);
        setUser(response.data.attributes.first_name);
      } catch (error) {}
  
    }, [dispatch]);
  
    useEffect(() =&gt; {
      getUser();
    }, []);
  
      return &lt;div data-testid=&quot;user-info&quot; &gt; Welcome {user}&lt;/div&gt;;
  }
  
  export default Home;
  </code></pre>
  <p>Home.test.js</p>
  <pre><code>import React, { Suspense } from &quot;react&quot;;
  import { render, cleanup, screen } from &quot;@testing-library/react&quot;;
  import &quot;@testing-library/jest-dom/extend-expect&quot;;
  import Home from &quot;../../editor/Home&quot;;
  import { Provider } from &quot;react-redux&quot;;
  import { store } from &quot;../../app/store&quot;;
  import Loader from &quot;../../components/Loader/Loader&quot;;
  
  const MockHomeComponent = () =&gt; {
    return (
      &lt;Provider store={store}&gt;
        &lt;Suspense fallback={&lt;Loader /&gt;}&gt;
          &lt;Home /&gt;
        &lt;/Suspense&gt;
      &lt;/Provider&gt;
    );
  };
  
      describe(&quot;Home component&quot;, () =&gt; {
        it(&quot;should return a user name&quot;, async () =&gt; {
          render(&lt;MockHomeComponent /&gt;);
          const userDivElement = await screen.findByTestId(`user-info`);
          expect(userDivElement).toBeInTheDocument();
          screen.debug();
        });
      
        afterAll(cleanup);
      });
  </code></pre>
  <p><strong>Problem:</strong></p>
  <p>When I run <code>npm run test</code> test is passed but in the <code>screen.debug()</code> results I dont see the user name returned as expected I just see <code>Welcome</code>. but it should be <code>welcome Jeff</code>.</p>
  <p>What am I doing wrong here? any suggestions will be appreciated</p>