title: Mock a function used inside a react component "multiple times"
body: <p>I am currently mocking an internal dependency in a react project this way:</p>
  <pre class="lang-tsx prettyprint-override"><code>import { QueryClient, QueryClientProvider } from &quot;react-query&quot;;
  import { render } from &quot;@testing-library/react&quot;;
  import SectionCourses from &quot;./SectionCourses&quot;;
  
  const queryClient = new QueryClient({});
  
  jest.mock(&quot;@myORG/axiosWrapperReactQuery&quot;, () =&gt; {
    const original = jest.requireActual(&quot;@myORG/axiosWrapperReactQuery&quot;);
    return {
      ...original,
      getAllCourses: jest.fn().mockImplementation(() =&gt; ({
        isLoading: false,
        typedData: [],
      })),
    };
  });
  
  it(&quot;not found&quot;, async () =&gt; {
    const { findByText } = render(
      &lt;QueryClientProvider client={queryClient}&gt;
        &lt;SectionCourses /&gt;
      &lt;/QueryClientProvider&gt;
    );
  
    const firstCourse = await findByText(&quot;No courses found&quot;);
    expect(firstCourse).toBeInTheDocument();
  });
  </code></pre>
  <p>It works perfectly but when I try to mock the dependency again in the same file it fails</p>
  <pre class="lang-tsx prettyprint-override"><code>// ALL THE PREVIOUS CODE
  
  jest.mock(&quot;@myORG/axiosWrapperReactQuery&quot;, () =&gt; {
    const original = jest.requireActual(&quot;@myORG/axiosWrapperReactQuery&quot;);
    return {
      ...original,
      getAllCourses: jest.fn().mockImplementation(() =&gt; ({
        isLoading: true, // This was changed to true
        typedData: [],
      })),
    };
  });
  
  it(&quot;is loading&quot;, async () =&gt; {
    const { findByText } = render(
      &lt;QueryClientProvider client={queryClient}&gt;
        &lt;SectionCourses /&gt;
      &lt;/QueryClientProvider&gt;
    );
  
    const firstCourse = await findByText(&quot;Loading...&quot;);
    expect(firstCourse).toBeInTheDocument();
  });
  </code></pre>
  <p>It seems that only takes the last <code>jest.mock</code></p>
  <p><a href="https://i.stack.imgur.com/jJlOj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jJlOj.png" alt="enter image description here" /></a></p>
  <p>So what will be the way to handle this if I need to mock that funcion many times so I can see what my React Component will display?</p>
  <p>I know I can create multiple files like <code>SectionCourses-V1.test.tsx</code>, <code>SectionCourses-V2.test.tsx</code>... but having so many files it's not ideal</p>
  <p>Note: This is not a duplicate of <a href="https://stackoverflow.com/questions/43500235/jest-mock-a-function-called-inside-a-react-component">Jest -- Mock a function called inside a React Component</a></p>