No apparent way to mock NextJs internal API calls

[JudithHeidi]

This might be a tricky corner case where this add-on and next/router don't play nicely, but just in case...

The system I work on heavily uses the ability to set up internal APIs as part of the NextJs page/app routing stack. We have components that call it directly via fetch to then call out to other external APIs as a way to hide sensitive information from the client.

Unfortunately, any way I try to mock the call seems to fail; in theory it should be a straightforward intercept to a local url, but it doesn't seem to be switching to the mock. Intercepting what the api route would call doesn't work either as the api route gets in the way - I just get a 404 back.

I have tried the router settings from the NextJs Storybook framework but no joy.

My fetch call is a straightforward const res = await fetch(/api/review-badge?trustYouId=${trustYouId});

My Storybook meta looks like (with an arg of foo being passed in):

const meta = {
  title: "Generic/Trust You Seal",
  component: TrustYouSeal,
  parameters: {
    mockData: [
      {
        url: "http://localhost:6006/api/review-badge?trustYouId=foo",
        method: "GET",
        status: 200,
        response: {
          score: 5,
          score_description: "Excellent",
          reviews_count: 100,
        },
      },
    ],
  },
} satisfies Meta<typeof TrustYouSeal>;

The mocking add-on is present and, as far as I can tell, doing what it's supposed to.

[davidpmccormick]

Have you tried with url: '/api/review-badge?trustYouId=foo' instead? I have this working to intercept a NextJS API call