title: MSW with Jest (confusion)
body: <p>I am trying to test a component that calls an API, i came across MSW and thought this would be great.</p>
  <pre><code>const server = setupServer(
      rest.get('http://localhost:3001/vote/test-slug', (req, res, ctx) =&gt;
          res(ctx.delay(500), ctx.status(200), ctx.json({ data: {alreadyVoted: `1`}} )),
      ),
  );
  </code></pre>
  <p>This is the server i have setup to handle the catch. Under the hood i use fetch to do API calls within my component and it looks something like this</p>
  <pre><code>apiFetchData = (params) =&gt; {
     const res = await fetch(url, options);
     const data = (await res.json()) || null;
  
  
     const response: fetchJsonResponse = {
          data,
          statusCode: res.status,
          error: res.status !== 200,
          success: res.status === 200,
      };
  }
  
  </code></pre>
  <p>My component has an onload useeffect like so:</p>
  <pre><code>const component = () =&gt; {
     useEffect(() =&gt; {
       async function voteCheck() {
              const result = await apiFetchData(
                  'http://localhost:3001/vote/test-slug',
              );
              if (result.data.alreadyVoted) {
                  setHasUserVoted(result.data.alreadyVoted);
              }
              setLoading(false);
          }
          voteCheck();
     }, []);
  }
  </code></pre>
  <p>when i run my test</p>
  <pre><code>await act(async () =&gt; {
     render(
       &lt;VoteButton /&gt;,
     );
  });
  
  </code></pre>
  <p>i get the following error from my apiFetchData</p>
  <pre><code>UseEffect result {
        data: {
          error: 'invalid json response body at  reason: Unexpected end of JSON input'
        },
        hasData: false,
        statusCode: 500,
        error: true,
        errorType: 'application'
      }
  </code></pre>
  <p>(i'm using jest-mock-fetch) and the result i get is this</p>
  <pre><code>Response {
        size: 0,
        timeout: 0,
        [Symbol(Body internals)]: { body: &lt;Buffer &gt;, disturbed: false, error: null },
        [Symbol(Response internals)]: {
          url: undefined,
          status: 200,
          statusText: 'OK',
          headers: Headers { [Symbol(map)]: [Object: null prototype] },
          counter: undefined
        }
      }
  </code></pre>
  <p>I'm stuck, it appears that MSW is catching the request from the component, but the response i'm getting seems to be 100% invalid for the fetch and i dont know what is wrong. Any help / tips would be much appreciated.</p>
  <p>edit: typo in my setupServer code</p>