Support mocking JSONP responses

[bikasv]

Scope

Adds a new behavior

Compatibility

• This is a breaking change

Feature description

Hi,
We've a requirements where we've a few APIs fetched from jsonp calls. While express supports jsonp, msw doesn't. Is it possible to add the support?

[kettanaito]

Hi, @bikasv. Thanks for opening this.

From what I can gather, JSONP is a response handling format. This is something your request client should do (receive the response, parse it, invoke the right callback, etc). You can already mock JSON responses with MSW, and I believe that includes responses in a JSONP format.

http.get('/resource', () => {
  return new HttpResponse(yourJsonP, { headers: { 'content-type': 'application/json' } })
})

The only catch here is that JSONP objects aren't actual valid JSON (i.e. JSON.parse(jsonp) fails) since they start with the callback function. So instead define a regular response, provide the body, and set the correct content-type header so your request client can parse it appropriately.

Hope this helps!

[bikasv]

Thanks @kettanaito. Let me try this approach

[bikasv]

Sorry for getting back here extremely late, but if anyone wants to try JSONP response, here's the syntax for it -

http.all('URL', ({ request }) => {
  const { searchParams } = new URL(request.url);
  const callback = searchParams.get('callback');

  const jsonp = `${callback}(${JSON.stringify(JSONP_RESPONSE_DATA)})`;

  return new HttpResponse(jsonp, { headers: { 'Content-Type': 'application/javascript' } });
});