Testing middleware with jest (withAuth in use)

[8byr0]

Hi there !
I'm currently facing troubles testing a middleware in my NextJS app. Here's a simplified implementation:

// pages/_middleware.ts

type NextRequestWithAuthData = NextRequest & {
  nextauth: { token: CustomJWT };
};
export default withAuth(
  async function middleware(
    req: NextRequestWithAuthData
  ): Promise<NextMiddlewareResult> {
    return NextResponse.next();
  },
  {
    callbacks: {
      authorized({ token }) {
        if (token) return true;

        return false;
      },
    },
  }
);

Before noticing that I could use withAuth, I was using getToken which I successfully mocked like this:

// middleware.spec.ts
import * as nextAuthJwtModule from "next-auth/jwt";

const mockGetToken = jest.fn<Promise<CustomJWT>, any>(
  async () =>
    new Promise((resolve) => {
      resolve({ 
          // ... my custom token content
       });
    })
);
jest.spyOn(nextAuthJwtModule, "getToken").mockImplementation(mockGetToken);

await middleware(mockedRequest);

expect(mockGetToken).toBeCalled()

But when I try do do the mock withAuth:

import * as nextAuthModule from 'next-auth/next/middleware';
// Also tried with import * as nextAuthModule from 'next-auth/middleware';

mockWithAuth = jest.fn((f, p) => {
  throw Error('mock with auth');
});

jest.spyOn(nextAuthModule, 'withAuth').mockImplementation(mockWithAuth);
  
await middleware(mockedRequest);

expect(mockWithAuth).toBeCalled();

When I run the test above, it fails during middleware execution saying:

[next-auth][error][NO_SECRET] https://next-auth.js.org/errors#no_secret

This error is relevant since I did not configure next auth in my test environment. This only shows that the mock is not working and the real withAuth function is executed instead.

Has anyone been successful mocking withAuth using jest?

I was able to get it working by creating a file under /__mocks__ :

// __mocks__/next-auth/middleware/index.ts
import { NextAuthMiddlewareOptions } from 'next-auth/middleware';
import { NextRequest, NextResponse } from 'next/server';
import { NextRequestWithAuthData } from 'types/auth';

type PartialMiddleware = (
  req: NextRequestWithAuthData,
) => Promise<NextResponse>;

export const withAuth = (
  middleware: PartialMiddleware,
  opts: NextAuthMiddlewareOptions,
) => {
  return (req: NextRequest) => {
    if (opts) {
      const allowed = opts.callbacks.authorized({
        req,
        token: {
          // This should be mockable
        },
      });
      if (!allowed) return false;
    }
    return middleware({
      ...req,
      nextauth: {
        token: {
          // This should be mockable too
        },
      },
    });
  };
};

What I don't like with this approach is that I cannot change the values based on my scenario (e.g. if user is authenticated or not). I have control on the request data since I pass a mock request to the middleware.

Any clues anyone?