Feedback: Mocking responses get data = '' (empty)

[cdevolder]

• Open page

I updated msw version form 0.49.2 to 2.0.10 so changing my handlers from
rest.get(`${BASE_PATH}/offers/:offerId`, (req, res, ctx) => { return res(ctx.json(offerPayload)); }),

to

http.get(`${BASE_PATH}/me/buyers/offers/:offerId`, () => { return new HttpResponse(offerPayload, { status: 200 }) }),

In my component I have

API.getOffer(offerId).then((response) => {
  setOffer(response.data);
 });

But response is equal to this payload with data = empty string when testing

{
      data: '',
      status: 200,
      statusText: 'OK',
      headers: Object [AxiosHeaders] { 'content-type': 'text/plain;charset=UTF-8' },
      config: {
        transitional: {
          silentJSONParsing: true,
          forcedJSONParsing: true,
          clarifyTimeoutError: false
        },
        adapter: [ 'xhr', 'http' ],
        transformRequest: [ [Function: transformRequest] ],
        transformResponse: [ [Function: transformResponse] ],
        timeout: 0,
        xsrfCookieName: 'XSRF-TOKEN',
        xsrfHeaderName: 'X-XSRF-TOKEN',
        maxContentLength: -1,
        maxBodyLength: -1,
        env: { FormData: [Function], Blob: [class Blob] },
        validateStatus: [Function: validateStatus],
        headers: Object [AxiosHeaders] {
          Accept: 'application/json, text/plain, */*',
          'Content-Type': null,
          'Access-Control-Allow-Origin': '*',
          'X-Auth-Token': null
        },
        method: 'get',
        url: 'http://localhost/api/v1/me/buyers/offers/1?',
        data: undefined
      },
      request: XMLHttpRequest {
        open: [Function: open],
        setRequestHeader: [Function: setRequestHeader],
        send: [Function: send],
        abort: [Function: abort],
        getResponseHeader: [Function (anonymous)],
        getAllResponseHeaders: [Function (anonymous)],
        overrideMimeType: [Function: overrideMimeType],
        onreadystatechange: [Getter/Setter],
        readyState: 4,
        timeout: [Getter/Setter],
        withCredentials: [Getter/Setter],
        upload: [Getter],
        responseURL: 'http://localhost/api/v1/me/buyers/offers/1?',
        status: 200,
        statusText: 'OK',
        responseType: [Getter/Setter],
        response: [Getter],
        responseText: [Getter],
        responseXML: [Getter],
        UNSENT: 0,
        OPENED: 1,
        HEADERS_RECEIVED: 2,
        LOADING: 3,
        DONE: 4,
        [Symbol(isMockedResponse)]: true
      }
    }

Would really appreciate any suggestion.

Thank you

[kettanaito]

Hi, @cdevolder.

Use HttpResponse.json() static method or provide the Content-Type: application/json header on the new HttpResponse() instance.

What you have right now will provide a text/plain response, which, I assume, Axios doesn't parse, resulting in an empty body, somehow. This should help:

http.get(`${BASE_PATH}/me/buyers/offers/:offerId`, () => {
  return HttpResponse.json(offerPayload)
})