title: How to mock API calls made within a React component being tested with Jest
body: <p>I'm trying to mock a fetch() that retrieves data into a component.</p>
  <p><a href="https://github.com/kentcdodds/react-testing-library-course/blob/master/src/__tests__/tdd-03-api.js" rel="noreferrer">I'm using this as a model for mocking my fetches</a>, but I'm having trouble getting it to work.</p>
  <p>I'm getting this error when I run my tests: <code>babel-plugin-jest-hoist: The module factory of 'jest.mock()' is not allowed to reference any out-of-scope variables.</code></p>
  <p>Is there a way I can have these functions return mock data instead of actually trying to make real API calls?</p>
  <h1>Code</h1>
  <h2>utils/getUsers.js</h2>
  <p>Returns users with roles mapped into each user.</p>
  <pre><code>const getUsersWithRoles = rolesList =&gt;
    fetch(`/users`, {
      credentials: &quot;include&quot;
    }).then(response =&gt;
      response.json().then(d =&gt; {
        const newUsersWithRoles = d.result.map(user =&gt; ({
          ...user,
          roles: rolesList.filter(role =&gt; user.roles.indexOf(role.iden) !== -1)
        }));
        return newUsersWithRoles;
      })
    );
  </code></pre>
  <h2>component/UserTable.js</h2>
  <pre><code>const UserTable = () =&gt; {
    const [users, setUsers] = useState([]);
    useEffect(() =&gt; {
      getTableData();
    }, []);
  
    const getTableData = () =&gt; {
      new Promise((res, rej) =&gt; res(getRoles()))
        .then(roles =&gt; getUsersWithRoles(roles))
        .then(users =&gt; {
          setUsers(users);
        });
    };
    return (...)
  };
  </code></pre>
  <h2>component/<strong>tests</strong>/UserTable.test.js</h2>
  <pre><code>import &quot;jest-dom/extend-expect&quot;;
  import React from &quot;react&quot;;
  import { render } from &quot;react-testing-library&quot;;
  import UserTable from &quot;../UserTable&quot;;
  import { getRoles as mockGetRoles } from &quot;../utils/roleUtils&quot;;
  import { getUsersWithRoles as mockGetUsersWithRoles } from &quot;../utils/userUtils&quot;;
  
  const users = [
    {
      name: &quot;Benglish&quot;,
      iden: &quot;63fea823365f1c81fad234abdf5a1f43&quot;,
      roles: [&quot;eaac4d45c3c41f449cf7c94622afacbc&quot;]
    }
  ];
  
  const roles = [
    {
      iden: &quot;b70e1fa11ae089b74731a628f2a9b126&quot;,
      name: &quot;senior dev&quot;
    },
    {
      iden: &quot;eaac4d45c3c41f449cf7c94622afacbc&quot;,
      name: &quot;dev&quot;
    }
  ];
  
  const usersWithRoles = [
    {
      name: &quot;Benglish&quot;,
      iden: &quot;63fea823365f1c81fad234abdf5a1f43&quot;,
      roles: [
        {
          iden: &quot;eaac4d45c3c41f449cf7c94622afacbc&quot;,
          name: &quot;dev&quot;
        }
      ]
    }
  ];
  
  jest.mock(&quot;../utils/userUtils&quot;, () =&gt; ({
    getUsers: jest.fn(() =&gt; Promise.resolve(users))
  }));
  jest.mock(&quot;../utils/roleUtils&quot;, () =&gt; ({
    getRolesWithUsers: jest.fn(() =&gt; Promise.resolve(usersWithRoles)),
    getRoles: jest.fn(() =&gt; Promise.resolve(roles))
  }));
  
  test(&quot;&lt;UserTable/&gt; show users&quot;, () =&gt; {
    const { queryByText } = render(&lt;UserTable /&gt;);
  
    expect(queryByText(&quot;Billy&quot;)).toBeTruthy();
  });
  </code></pre>