Only mock certain base URLs

[sazzer]

Scope

Adds a new behavior

Compatibility

• This is a breaking change

Feature description

Apologies if this is already possible, but if so I can't see how to do it.

It would be hugely useful if MSW could be set up to only intercept calls to a particular base URL, and ignore anything else.

So, for example, I could set it up to only mock calls going to "http://api.example.com/api/" and anything underneath that. Any calls made to any other URLs would be ignored and do exactly what the browser would normally do without MSW.

This would allow me to, for example, use onUnhandledRequest: 'error' but knowing that it will only error on calls made to my mocked API and anything else - e.g. calls for static resources, or to real third-party APIs - will all work fine. Something like:

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start({
    mockedUrlBases: ['http://api.example.com/api/'],
    onUnhandledRequest: 'error'
  })
}

Cheers

[sazzer]

For now, what I've done is add the following to the end of the list of handlers passed in to setupWorker(), and then set onUnhandledRequest to "bypass". And it works, but it is very much a hack:

import { rest } from 'msw';

const API_URL = import.meta.env.API_URL;

export default [
  rest.get(API_URL + '/*', (_, res, ctx) => {
    return res(ctx.status(501));
  })
];

[kettanaito]

Hi, @sazzer.

Please see my original answer as to how to implement a base path for relative request matching. Hope it helps.

[sazzer]

I've seen that, but it's not quite the same thing.

I was thinking the case where, for example, my app needs to make calls to "http://api.example.com" as well as to "https://something.auth.eu-west-1.amazoncognito.com" for authentication. But I only need to mock the "http://api.example.com" calls.

I can just leave it to the defaults, and then every time I get an unexpected call I get a console warning. But that also includes "expected" calls to AWS.

I can use my hack of a catch-all on "http://api.example.com" that returns an HTTP 501, but then it's a bit less obvious what's going on.

This proposal was to allow MSW to only ever care about calls to "http://api.example.com" - and then use the built-in functionality to error on unexpected calls - and anything outside of that base would just be ignored.

[sazzer]

So, for example, if I used:

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start({
    mockedUrlBases: ['http://api.example.com/api/'],
    onUnhandledRequest: 'error'
  })
}

to set up MSW then:

• All expected calls to http://api.example.com/api/... will trigger MSW and work correctly.
• All unexpected calls to http://api.example.com/api/... will error in MSW as expected.
• All calls to anything else will be totally ignored by MSW - effectively acting as "bypass" instead of "error" - and so will hit the real services instead but without anything in the console logs.

[kettanaito]

Oh, I see it now. So your requirement is not to print warnings on unhandled requests that are expected to be unhandled. Apologies for reading it wrong, this has nothing to do with the base URL.

You can implement what you want by providing a custom function to onUnhandledRequest option of worker.start()/server.listen() and ignoring any unhandled requests to the known hosts:

worker.start({
  onUnhandledRequest(request, print) {
    // Ignore unhandled requests to known hosts. 
    if (request.url.hostname === 'auth.aws.com') {
       return 
    }

    print.warning()
  }
})

[sazzer]

Aha - I didn't realise you could do that! So I've done this now and it works perfectly :)

  worker.start({
    onUnhandledRequest: (request, print) => {
      if (request.url.toString().startsWith(API_URL)) {
        print.error();
      }
    }
  });

Cheers

[kettanaito]

Looks lovely! Glad you figured it out.