title: Mocking an axios post using React Testing Library / Jest
body: <p>I am struggling with figuring out how to correctly mock this Axios post in my React test.  It seems like the documentation and tutorials out there are all over the place in terms of how they do it, no strong consensus or best practice.</p>
  <p>So here is my Test:
  BatchList.test.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { setupWorker, rest } from 'msw';
  import {
      render,
      screen,
      within,
      fireEvent,
      waitFor,
  } from '@testing-library/react';
  import '@testing-library/jest-dom';
  import { Provider as AlertProvider } from 'react-alert';
  import AlertMUITemplate from 'react-alert-template-mui';
  import BatchList from './BatchList';
  import mockedAxios from 'axios';
  
  // ... other tests that succeed here ...
  
  // only test that fails here
  test('clicking yes and passing back only 2 valid batch numbers should show 2 valid, 2 invalid batch numbers in list', async () =&gt; {
      // renderBatchListWithNumbers();
      const batchList = render(
          &lt;AlertProvider template={AlertMUITemplate}&gt;
              &lt;BatchList
                  formulaID={''}
                  orderID={''}
                  itemID={''}
                  formulaResults={[]}
                  batchNumbers={[
                      { BATCH_ID: '987654', ID: '78' },
                      { BATCH_ID: '261010', ID: '79' },
                      { BATCH_ID: '301967', ID: '80' },
                      { BATCH_ID: '445566', ID: '81' },
                  ]}
                  setBatchNumbers={mockedEmptyFn}
                  batchNumber={'5'}
                  setBatchNumber={mockedEmptyFn}
              /&gt;
          &lt;/AlertProvider&gt;
      );
      const completeButton = batchList.getByText('Complete');
      fireEvent.click(completeButton);
      const yesButton = batchList.getByText('Yes');
      expect(yesButton).toBeInTheDocument();
      fireEvent.click(yesButton);
  
      // now we need to figure out mocking the API calls!!!
      const data = {
          msg: 'fail',
          invalidBatchNumbers: ['987654', '445566'],
      };
      mockedAxios.post.mockResolvedValueOnce({
          data: data,
      });
  
      await waitFor(() =&gt; {
  
          expect(batchList.getByText('987654')).toHaveClass('invalid');
          expect(batchList.getByText('261010')).toHaveClass('valid');
      });
  });
  </code></pre>
  <p>And here is my <code>axios.js</code> inside my <code>__mocks__</code> folder:</p>
  <pre class="lang-js prettyprint-override"><code>export default {
      post: jest.fn().mockResolvedValue(),
  };
  </code></pre>
  <p>So the error I am getting in my test is this: <code>thrown: &quot;Unable to complete all batches - TypeError: (0 , _axios.default) is not a function&quot;</code></p>
  <p>And that error message string is coming from my client side API call here:</p>
  <pre class="lang-js prettyprint-override"><code>export const completeAllBatches = async (
      orderID,
      itemID,
      batchNumbers
  ) =&gt; {
      const completeAllBatchesURL =
          serverURL + `:${port}/completeAllBatches`;
  
      try {
          return await axios({
              method: 'post',
              url: completeAllBatchesURL,
              timeout: shortTimeout,
              data: {
                  orderID,
                  itemID,
                  batchNumbers,
              },
          })
              .then((res) =&gt; {
                  return res;
              })
              .catch((e) =&gt; {
                  return Promise.reject(
                      '1: Unable to complete all batches - ' + e
                  );
              });
      } catch (e) {
          return Promise.reject('2: Unable to complete all batches - ' + e);
      }
  };
  </code></pre>