How to set the handler domain based on environment flag

[canrozanes]

I want to use MSW both during testing and during development. While testing I want msw to hijack requests to localhost:3000/api/ whereas during development, I want msw to hijjack request to staging.example.com/api/

Is there any way to set this up within MSW?

If not i'd be if the domain could be set using an API along the lines of:

worker.start({
   domain: env.isTesting ? "localhost:3000/api" : "staging.example.com/api/"
})

[kettanaito]

Hi, @canrozanes. Thanks for the question, it's a good one.

You can achieve what you want by encapsulating that URL logic in a helper function. Something like url():

function url(path) {
  const domain = env.isTesting ? 'http://localhost/api' : 'http:// staging.example.com/api'
}

And then use that function to create URL predicates in request handlers:

http.get(url('/user'), resolver)
http.post('url('/cart/:id'), resolver)

This is the way I recommend you do it.

Note that if your resource paths will remain the same, which they will, I can recommend dropping the domain name from the URL predicate. If your website is deployed at staging.example.com during the !env.isTesting scenario, you can treat it as the base URL:

http.get('/api/user', resolver)

The /user will be resolved against your app's URL. If it's localhost:3000 while developing, you will target the http://localhost:3000/api/user with that request handler. If it's staging.example.com while on staging, you will target the http://staging.example.com/api/user with that same handler.

[kettanaito]

Also see #397 (comment).