Allow option to change JSON parser behaviour

[anthonyma94]

Scope

Adds a new behavior

Compatibility

• This is a breaking change

Feature description

In Express, there is an option to change the behavior of the JSON parser:

app.use(
    express.json({
        reviver: (key, value) => {
           // Perform custom transform
        },
    })
);

This option is also built-in to JSON.parse:

JSON.parse(string, (key, value) => {
  // Perform custom transform
});

It would be great if MSW could implement something like this globally for req.body, it would make mocking a backend a lot closer to production.

[kettanaito]

Hey, @anthonyma94. Thanks for suggesting this.

You can achieve custom JSON parsing using the current MSW API. I think the most straightforward option is to write a higher-order resolver function that'd encapsulate the JSON parsing logic.

// Write a custom response resolver that'd properly parse "hal+json"
// request bodies.
function withHalJson(resolver) {
  return (req, res, ctx) => {
    // You probably want to account for non-JSON request bodies.
    if (req.headers.get('content-type')?.includes('hal+json')) {
      // Get the original request body and provide additional parsing.
      // Keep in mind that MSW will attempt to parse "application/json"
      // request bodies automatically. You may be operating on a parsed result here.
      const json = req.body
      const halJson = parseInSomeWay(json)

      // Replace the original body.
      req.body = halJson
    }

    return resolver(req, res, ctx)
  }
}

rest.post('/resource', withHalJson((req, res, ctx) => {
  req.body // It's custom parsed request body now.
}))

Let me know if this would work for your use case.

[kettanaito]

One thing that may potentially get in the way is the mentioned automatic JSON request body parsing provided by MSW. There's no way to opt out of this at the moment:

msw/src/utils/request/parseBody.ts

Lines 27 to 29 in 9bdbecb

	if (hasJsonContent && typeof body !== 'object') {
	return jsonParse(body.toString()) || body
	}

And if the accepted req.body cannot be parsed by JSON.parse, we'd return the request body as-is, so you can introduce your custom parsing. Just check the input type of the request body because it's always an ambiguous Record<string, unknown> | string.

[anthonyma94]

I currently have what you described, a transform wrapper for my handlers. But it's not as efficient as I'm looping through an object after JSON.parse, again as you mentioned. I think the solution offered by JSON.parse and Express is more elegant and performant, but for my use case the performance difference is minimal if any.

[kettanaito]

We may consider a custom wrapper for requests/responses which exposes fetch-like .body(), .json() and so forth for you to consume.

rest.get('/user', (req, res, ctx) => {
  const json = await req.json() // or "req.body()"
})

So the library would make no assumptions on its side and expose you the request/response bodies as-is. In this case, you could use a custom parser:

// Get request body as plain text, provide it to the parser.
const json = customParser(await req.body())

But there's no plans for this kind of abstraction as of now.