Automatic fetch replacement

[linas-deliveroo]

Hi!

Is there a way to automatically replace fetch calls with direct function calls to the Next API?

I have a page that fetches (1) a Next API that in turn makes another fetch (2) call a 3rd party service. I want to write a jest test that would mock the (2) fetch and verify the React component state afterwards. Unfortunately, the (1) fetch is there, too, so I either have to mock it (yuck) or run the Next API as a separate service and then… lose the ability to mock (2) fetch. With all the code-sharing-between-front-and-back talk surely there must be a way to automatically replace (mock)

fetch('/api/backend')

with

// backend.api.js:
handler(new NextApiRequest(something), new NextApiResponse())

Does this make sense? Would it not be possible with this lib?

Thank you!

[Xunnamius]

NextApiRequest and NextApiResponse are TypeScript types, not classes. They don't actually exist, so you can't create new instances of them. You're actually dealing with IncomingMessage and ServerResponse instances (respectively) with methods added by the Next.js API resolver. The purpose of NTARH is to pull this resolver out of Next.js's source code and run it for you (i.e. your handlers receive objects satisfying the NextApiRequest and NextApiResponse type definitions) just by calling the extremely convenient testApiHandler function.

From what you describe, it sounds like you want to use something like Mock Service Worker (MSW), which is compatible with NTARH. You can use MSW to capture and interrogate fetch #​2 while leaving NTARH to optimally handle fetch #​1. Rarely, if ever, do you want to directly mock any fetch function implementation when testing JavaScript code.

For example:

import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { testApiHandler } from 'next-test-api-route-handler';
import handler from './backend.api.js';

const server = setupServer(
  rest.all('url-pattern-matching-the-third-party-service-you-are-talking-about', async (req, res, ctx) => {
    // Test fetch #2, which is coming from inside of your handler, here
  })
);

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));

afterEach(() => {
  server.resetHandlers();
});

afterAll(() => server.close());

await testApiHandler({
  handler,
  test: async ({ fetch }) => {
    // This is fetch #1 made to Next.js
    const res = await fetch('/api/backend');
    // Test fetch #1 (and potentially fetch #2 too) here
    await expect(res.json()).resolves.toStrictEqual({ ... });
  }
});

For further assistance, reply with a MRE demonstrating your issue :)

[linas-deliveroo]

Thank you! I'll check MSW to see if it helps me!