How do I mock server-side API calls in a Nextjs app?

Help
, ,
1

I’m trying to figure out how to mock calls to the auth0 authentication backend when testing a next js app with React Testing Library. I’m using auth0/nextjs-auth0 to handle authentication. My intention is to use MSW to provide mocks for all API calls.

I followed this example in the nextjs docs next.js/examples/with-msw to set up mocks for both client and server API calls. All API calls generated by the auth0/nextjs-auth0 package ( /api/auth/login , /api/auth/callback , /api/auth/logout and /api/auth/me) received mock responses.

A mock response for /api/auth/me is shown below

import { rest } from 'msw';

export const handlers = [
  // /api/auth/me
  rest.get(/.*\/api\/auth\/me$/, (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        user: { name: 'test', email: 'email@domain.com' },
      }),
    );
  }),
];

The example setup works fine when I run the app in my browser. But when I run my test the mocks are not getting picked up.

An example test block looks like this

import React from 'react';
import {render , screen } from '@testing-library/react';

import Home from 'pages/index';
import App from 'pages/_app';

describe('Home', () => {
  it('should render the loading screen', async () => {
    render(<App Component={Home} />);
    const loader = screen.getByTestId('loading-screen');
    expect(loader).toBeInTheDocument();
  });
});

I render the page inside the App component like this <App Component={Home} /> so that I will have access to the various contexts wrapping the pages.

I have spent about 2 days on this trying out various configurations and I still don’t know what I might be doing wrong. Any and every help is appreciated.