title: Mock Service Worker returns empty
body: <p>I'm new to <strong>react testing library</strong>. I am trying to test a simple component that call some apis
  and then it fills inputs with the data of these apis. But when I run <code>npm test</code> it keeps showing me this : the recieved value is empty</p>
  <p>Expected the element to have value:
  100
  Received:</p>
  <pre><code>   7 |     it('displays returned client info on successful fetch', async () =&gt; {
     8 |       render(&lt;Client /&gt;);
  &gt;  9 |       expect(await screen.findByLabelText('IFU')).toHaveValue('100');
       |                                                   ^
    10 |     });
    11 |
    12 |     it('displays error message when fetching tasks raises error', async () =&gt; {
  
    at Object.&lt;anonymous&gt; (src/unit-tests/Client.test.js:9:51)
  </code></pre>
  <p>here is my test</p>
  <pre><code>import { render, screen } from '@testing-library/react';
  import Client from './../components/Client';
  import { mswServer } from './api-mocks/msw-server';
  import { clientHandlerException } from './api-mocks/handlers';
  
  describe('Component: Client', () =&gt; {
      it('displays returned client info on successful fetch', async () =&gt; {
        render(&lt;Client /&gt;);
        expect(await screen.findByLabelText('IFU')).toHaveValue('100');
      });
  
      it('displays error message when fetching tasks raises error', async () =&gt; {
          mswServer.use(clientHandlerException);
          render(&lt;Client /&gt;);
        });
  }); 
  </code></pre>
  <p>handlers.js</p>
  <pre><code>import { rest } from 'msw';
  
  const importateur = {numeroRc: &quot;1000&quot;, description: &quot;desc one&quot;, ifu: &quot;100&quot;,  ice: &quot;789&quot;, company: &quot;mycom&quot;, city: &quot;paris&quot;}
  
       export const clientHandler = rest.get(&quot;http://localhost:8080/api/informationsClient&quot;, async (req, res, ctx) =&gt; {
        // res(ctx.json(mockClientInfo))
        return res(
          ctx.status(200),
          ctx.json(importateur)
        )
      });
      
      export const clientHandlerException = rest.get(&quot;http://localhost:8080/api/informationsClient&quot;, async (req, res, ctx) =&gt;
          res(ctx.status(500), ctx.json({ message: 'Deliberately broken request' }))
      );
      
      export const handlers = [clientHandler];
  </code></pre>
  <p>msw-server.js</p>
  <pre><code>import { setupServer } from 'msw/node';
  import { handlers } from './handlers';
  
  export const mswServer = setupServer(...handlers);
  </code></pre>
  <p>setupTests.js</p>
  <pre><code>import '@testing-library/jest-dom';
  import { mswServer } from './msw-server';
  
  beforeAll(() =&gt; mswServer.listen());
  afterEach(() =&gt; mswServer.resetHandlers());
  afterAll(() =&gt; mswServer.close());
  </code></pre>
  <p>My component</p>
  <pre><code>export interface IClient {
      numeroRc: string,
      description: string,
      ifu: string,
      ice: string
    }
    
  const Client = (props: ClientProps) =&gt; {
  
  const [clientData, setClientData] = React.useState&lt;IClient&gt;(
        {numeroRc: &quot;&quot;,
        description: &quot;&quot;,
        ifu: &quot;&quot;,
        ice: &quot;&quot;}
      );
   //other useEffect s that call other apis  
  
   React.useEffect(() =&gt; {
          (async () =&gt; {      
            const response = await getClientInfo();
            setClientData(response as IClient);   
          })();  
    
      }, [])
  
      return(
          &lt;Stack direction=&quot;row&quot; spacing={3} className='client' &gt;
              &lt;TextField id=&quot;numro-rc&quot; label=&quot;Numero RC&quot; variant=&quot;outlined&quot; value={clientData.numeroRc}/&gt;
              &lt;TextField id=&quot;client&quot; label=&quot;Client&quot; variant=&quot;outlined&quot; value={clientData.description}/&gt;
              &lt;TextField id=&quot;ifu&quot; label=&quot;IFU&quot; variant=&quot;outlined&quot; value={clientData.ifu} /&gt;
              &lt;TextField title='ice' id=&quot;ice&quot; label=&quot;ICE&quot; variant=&quot;outlined&quot; value={clientData.ice} /&gt;
          &lt;/Stack&gt;
      );
  }
  </code></pre>
  <p>UPDATE</p>
  <p>getClientInfo is a method that call my api using axios ( I put all my apis calls inside a file api.tsx)</p>
  <pre><code>axios.defaults.baseURL = 'http://localhost:8080/api'
  ...
  
      export const getClientInfo = async () =&gt; {
          try {
              const response =  await axios.get(`/informationsClient`);
              return response.data;  
          } catch(e) {
              console.log(e);
              return 0;
          }
      }
  </code></pre>
  <p>please what it could be the issue ?</p>