title: Network error while using API on localhost, with Jest & React Testing Library
body: <p>I'm using the React testing library and Jest, and trying to mock a GET request to my backend which runs also on my localhost (on different port).</p>
  <pre><code>import * as React from &quot;react&quot;;
  import { render } from &quot;@testing-library/react&quot;;
  import FetchMock from &quot;jest-fetch-mock&quot;;
  import MyComponent from &quot;../MyComponent&quot;;
  
  describe(&quot;MyComponent&quot;, () =&gt; {
  
    beforeEach(() =&gt; {
      FetchMock.resetMocks();
    });
  
    it(&quot;renders correct data&quot;, async () =&gt; {
      const mockData = { data: &quot;foo&quot; };
      FetchMock.once(JSON.stringify(mockData))
  
      const { findAllByText } = render(
        &lt;MyComponent url={'localhost:4000'} /&gt;
      );
  
      const text= await findAllByText(/foo/);
      expect(text).toHaveLength(1);
    });
  });
  </code></pre>
  <p>In my tests configuration, I've added this line too:</p>
  <pre><code>axios.defaults.baseURL = 'http://localhost:4000';
  </code></pre>
  <p>It seems like there is a problem with using the localhost, as I am getting this error:</p>
  <pre><code>console.error node_modules/@testing-library/react/dist/act-compat.js:52
      Error: Error: connect ECONNREFUSED 127.0.0.1:80
          at Object.dispatchError (path\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:65:19)
          at Request.&lt;anonymous&gt; (path\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:676:20)
          at Request.emit (events.js:201:15)
          at Request.onRequestError (path\node_modules\request\request.js:877:8)
          at ClientRequest.emit (events.js:196:13)
          at Socket.socketErrorListener (_http_client.js:402:9)
          at Socket.emit (events.js:196:13)
          at emitErrorNT (internal/streams/destroy.js:91:8)
          at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
          at processTicksAndRejections (internal/process/task_queues.js:83:17) undefined
  </code></pre>
  <p>This is my component (<code>MyComponent.js</code>):</p>
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  export default function MyComponent(url) {
    const [data, setData] = React.useState('');
    
    React.useEffect(() =&gt; {
      const getData = async () =&gt; {
        axios.get(`${url}/foo`)
          .then(res =&gt; {
            setData(res.data)
          })
      };
      getData();
    }, []);
  
    return (
      &lt;h1&gt;{data}&lt;/h1&gt;
    );
  }
  
  </code></pre>
  <p>Any ideas?</p>