Not able to intercept query string calls against the same domain

[erickbelfy]

I'm trying to intercept two API calls from the same domain, but despite setting up the handlers, MSW is giving me a warning that the requests are not being intercepted.

Here’s the code I’m using:

export const mountS3Provider = ({ callback, method, scope = '' }) => {
  const formattedUrl = `https://s3.west.mycomptest.com/*`;
  return http[method](formattedUrl, async ({ request }) => {
    const url = new URL(request.url);
    const matches = url.searchParams.has(scope);
    if (matches) {
      return callback({ request });
    }
   // if it doesn't match the query string, it passes through
    return passthrough();
  });
};

// mounting the S3Provider
const awsAllRegionsApproach = mountS3Provider({
  callback: getAwsAllRegionsResponse,
  method: 'get',
  scope: 'awsAllRegions'
});

const awsCredentialsApproach = mountS3Provider({
  callback: getAwsCredentialsResponse,
  method: 'get',
  scope: 'awsCredentials'
});

The callback functions(Request handlers) for handling the responses look like this:

export const getAwsAllRegionsResponse = ({ request }) => {
  const url = new URL(request.url);
  const isAwsAllRegions = url.searchParams.has('awsAllRegions');
  if (isAwsAllRegions) {
    return HttpResponse.xml(jsonToXml(regions));
  }
};

export const getAwsCredentialsResponse = ({ request }) => {
  const url = new URL(request.url);
  const hasAwsCredentials = url.searchParams.has('awsCredentials');
  if (hasAwsCredentials) {
    return HttpResponse.xml(jsonToXml(credentials));
  }
};

I'm trying to intercept API calls to:

• https://s3.west.mycomptest.com/?awsAllRegions
• https://s3.west.mycomptest.com/?awsCredentials
  However, MSW warns me that one of the requests isn't being intercepted:

  console.warn
    [MSW] Warning: intercepted a request without a matching request handler:

      • GET https://s3.west.mycomptest.com/?awsCredentials

    If you still wish to intercept this unhandled request, please create a request handler for it.
    Read more: https://mswjs.io/docs/getting-started/mocks

I'm using server.use() to register the handlers within my unit test:

    server.use(
      awsAllRegionsApproach,
      awsCredentialsApproach
    );

I also tried combining both handlers into one, using conditional statements to differentiate between awsAllRegions and awsCredentials, but it didn’t work.

To debug, I added an event listener to track outgoing requests:

server.events.on('request:start', ({ request, requestId }) => {
  console.log('Outgoing request:', request.method, request.url);
});

The listener shows the request is being triggered:

    Outgoing request: GET https://s3.west.mycomptest.com/?awsCredentials

But for some reason, it’s still not being intercepted by MSW. Does anyone have suggestions for fixing this?

[kettanaito]

Hi, @erickbelfy. Can you please show the actual request handlers? These:

   server.use(
+      awsAllRegionsApproach,
+      awsCredentialsApproach
    );

How do they look like? What URLs do they target?

If the server.events listener is triggered and the request is still not intercepted, that means your request handler doesn't target it. Please share the handler and we can look into this.

[erickbelfy]

as I described above I created a utility function that listens to https://s3.west.mycomptest.com/ the request handler is the following:

export const mountS3Provider = ({ callback, method, scope = '' }) => {
  const formattedUrl = `https://s3.west.mycomptest.com/*`;
  return http[method](formattedUrl, async ({ request }) => {
    const url = new URL(request.url);
    const matches = url.searchParams.has(scope);
    if (matches) {
      return callback({ request });
    }
   // if it doesn't match the query string, it passes through
    return passthrough();
  });
};

the handlers are:

export const getAwsAllRegionsResponse = ({ request }) => {
  const url = new URL(request.url);
  const isAwsAllRegions = url.searchParams.has('awsAllRegions');
  if (isAwsAllRegions) {
    return HttpResponse.xml(jsonToXml(regions));
  }
};

export const getAwsCredentialsResponse = ({ request }) => {
  const url = new URL(request.url);
  const hasAwsCredentials = url.searchParams.has('awsCredentials');
  if (hasAwsCredentials) {
    return HttpResponse.xml(jsonToXml(credentials));
  }
};

then I'm mounting them like this:

// mounting the S3Provider
const awsAllRegionsApproach = mountS3Provider({
  callback: getAwsAllRegionsResponse,
  method: 'get',
  scope: 'awsAllRegions'
});

const awsCredentialsApproach = mountS3Provider({
  callback: getAwsCredentialsResponse,
  method: 'get',
  scope: 'awsCredentials'
});

[kettanaito]

Apologies, I missed those abstractions. Thanks for pointing them out to me.

Does this console get called for the unhandled request?

  return http[method](formattedUrl, async ({ request }) => {
+   console.log(request.method, request.url)
    const url = new URL(request.url);

[erickbelfy]

nope, the console is only being called in the first call, in the API callstack GET https://s3.west.mycomptest.com/?awsAllRegions is being called first, the second API call is GET https://s3.west.mycomptest.com/?awsCredentials it seems like since the first call against the domain https://s3.west.mycomptest.com/ is being intercepted, the following call is ignored, I tried using http[method](({ request }) => {...}, { once: true, }) to be sure that it calls only once, but the second API call is never being intercepted

I also tried putting both conditions in the same handler:

const formattedUrl = `https://s3.west.mycomptest.com/*`;
export const bulkS3Handler = http.get(formattedUrl, async ({ request }) => {
    const url = new URL(request.url);
    const isAwsAllRegions = url.searchParams.has('awsAllRegions');
    if (isAwsAllRegions) {
      return HttpResponse.xml(jsonToXml(regions));
    }
   const hasAwsCredentials = url.searchParams.has('awsCredentials');
   if (hasAwsCredentials) {
     return HttpResponse.xml(jsonToXml(credentials));
   }
   // if it doesn't match the query string, it passes through
    return passthrough();
  });
};

using .use() method within my test

 server.use(
      bulkS3Handler
    );

But only the first API call in the callstack is being intercepted.

[kettanaito]

If you handle the request in the first handler then yes, of course no other handlers would be able to affect it. You have to do an early return in the cases you don't want to be handled.

I also think reading this can be helpful: https://mswjs.io/docs/concepts/request-handler#execution-order.