Is it possible to customise the RequestBody when returning an error response

[nirajfu3e]

I am creating a 403 response like this:

rest.get('http://localhost', (req, res, ctx) => {
  return res(
      ctx.status(403),
  )
})

This has a RequestBody like this:

{
  data: '',
  status: 403,
  statusText: 'Forbidden',
  headers: { 'x-powered-by': 'msw' },

The issue I am having is on my api response from Laravel, the error status comes in error.response.status and not error.status. Is there anyway we could modify the RequestBody so that we could have custom properties or entirely custom response or is the only way to fix it changing it in the API sot hat the response to be similar to the RequestBody?

[kettanaito]

Hey, @nirajfu3e.

MSW constructs a Response instance in a browser and a response in Node.js respective to the request module (IncomingMessage for ClientRequest, for example). If your client expects the status in error.response.status, it still gets it from somewhere.

What is error here?

Based on your example, I can only see error as the response, and error.response as a "response" property on the JSON response body. You can create such mocked response like this:

rest.get('http://localhost', (req, res, ctx) => {
  return res(
    ctx.status(403),
    // No magic: only because your client expects "error.response.status".
    ctx.json({ response: { status: 403 } })
  )
})

If this is a custom behavior of your client (which it seems to be), you'd have to model around it explicitly.

If this doesn't solve it, could you prepare a reproduction repository where I could look into the matter?

[nirajfu3e]

@kettanaito I use it in test environment so I presume it's a response in Node.js. Here is how I am making the request on a Vue app to a Laravel API:

api.get('https://localhost/api/').then(
(data) => {
    this.data = data
},
(error) => {
    console.log(error)
    if (error.response.status === 403) {
        return;
    }
}).finally(() => {
  this.loading = false;
});

When I mock the response as you mentioned, it essentially adds the response to the data object as follows:

{
      data: { response: { status: 403 } },
      status: 403,
      statusText: 'Forbidden',

What I was hoping for is if there was a way to modify the object to be something like below - essentially adding the response as a top level object instead of within the response body data.

{
      data: { },
      response: { status: 403 }
      status: 403,
      statusText: 'Forbidden',

I guess that is not possible or even logical to have a response property but I was wondering if that was possible. I think the best option looks like simply to fix the API response. Thanks.

[kettanaito]

The response property is an implementation detail of your request client. To mock such requests reliably, you need to understand how that implementation detail works. You may raise a question in the repo of the request client library you're using.

It's strange that they keep a copy of the response status yet it's not synced with the actual status you get. There may be an issue on their side, there may be a missing setup also. However, you do form a correct response, so I doubt it's the latter.

You may post your findings here.