How to test _middleware function

[Takeno]

Hi!

I'm trying to going deep in new next middlewares.
Here a very dummy middleware:

// pages/_middleware.ts
import type {NextRequest} from 'next/server';

export async function middleware(req: NextRequest) {
  if (isAnonymous(req)) {
    return new Response('Anon!');
  }

  return new Response('Hello, world!');
}

// isAnonymous implementations

I would like to test this middleware function via some unit tests via Jest.
Here the dummy example:

import {NextRequest} from 'next/server';

import {middleware} from '../../pages/_middleware';

describe('Next Auth Middleware', () => {
  it('should return unlogged if no tokens are present', async () => {
    const req = new NextRequest('http://localhost:3000');

    const result = await middleware(req);

    expect(result.status).toBe(200);
  });
});

I'm going mad to understand how to provide all dependencies and let this test works.

Until now:

0. Jest configuration: it's as manual from here: https://nextjs.org/docs/testing . Other typescript-written tests are running correctly.
1. node/server use exports syntax instead of module.exports like other modules. 💥

app/node_modules/next/server.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { NextRequest } from 'next/dist/server/web/spec-extension/request'
                                                                                      ^^^^^^
SyntaxError: Unexpected token 'export'

2. Import internals implementations

import {NextRequest} from 'next/dist/server/web/spec-extension/request';

BUT Request standard object is not defined in test environment: ReferenceError: Request is not defined

... to be continued

Any suggestion how to create a valid Next Request or a valid mock to test the middleware?
PS: I know I can't move outside the logic and keep in that function just some returns, but for sake of knowledge I really want to test the middleware.

[icyJoseph]

Hi,

A bit late here, but here's a snippet I use here and there (it does create a dependency to a library called mockito):

/**
 * @jest-environment node
 */

import {NextURL} from 'next/dist/server/web/next-url';
// eslint-disable-next-line @next/next/no-server-import-in-page
import {NextRequest} from 'next/server'; // it's ok to import next/server here
import {instance, mock, reset, when} from 'ts-mockito';

const mockedRequest: NextRequest = mock(NextRequest);

afterEach(() => {
    reset(mockedRequest);
});

// and then test
test('Rewrites from some-path to other-path', async () => {
    const domain = 'https://example.com';
    const url = new URL('/some-path', domain);

    const nextUrl = new NextURL(url);

    when(mockedRequest.nextUrl).thenReturn(nextUrl);

    const result = await middleware(instance(mockedRequest));

    expect(result).toBeDefined();

    expect(result.status).toBe(200);

    expect(result.headers.get('x-middleware-rewrite')).toBe(domain + '/other-path');
});

[leandromatos]

Finally, everything works perfectly after putting import 'isomorphic-fetch' on my jest.setup.ts.

The ReferenceError: Request is not defined error message is gone!

[vinicios-gomes]

Working with ts-mockito, I can mock all Request data.

How to simulate cookie values?
I can't find information about it on the web.

[fabianfetting]

Switching the jest environment to node fixes the error ReferenceError: Request is not defined for me.

/**
 * @jest-environment node
 */

[graup]

@vinicios-gomes

You can mock cookie values like this

const mockedRequest = mock(NextRequest);

const domain = "https://example.com";
const url = new URL("/some-path", domain);
const nextUrl = new NextURL(url);
const requestHeaders = new Headers();
const cookies = new RequestCookies(requestHeaders);
cookies.set("myCookie", "foo");
when(mockedRequest.headers).thenReturn(requestHeaders);
when(mockedRequest.cookies).thenReturn(cookies);
when(mockedRequest.nextUrl).thenReturn(nextUrl);

[kelvyn-thai]

Can try
// middlware.ts

import { NextRequest, NextResponse } from "next/server";
import { authService } from "./AuthService";

export const middleware = async (request: NextRequest) => {
  const response = NextResponse.next();

  if (!authService.checkIsAuthenticated(request)) {
    const { access_token, refresh_token } =
      await authService.handleRequestCheckAuthenticate();

    response.cookies.set("access_token", access_token);
    response.cookies.set("refresh_token", refresh_token);
  }
  return response;
};


export const config = {
  matcher: "/profile/:path*",
  runtime: "nodejs",
};

// middleware.spec.ts

/**
 * @jest-environment node
 */
import { RequestCookies } from "next/dist/compiled/@edge-runtime/cookies";
import { NextURL } from "next/dist/server/web/next-url";
import { NextRequest, NextResponse } from "next/server";
import { instance, mock, reset, when } from "ts-mockito";
import AuthService from "./AuthService";
import { middleware } from "./middleware";

describe("Test middleware", () => {
  let mockedRequest: NextRequest;
  let domain: string;

  beforeAll(() => {
    mockedRequest = mock(NextRequest);
    domain = "http://localhost:3000";

    const requestHeaders = new Headers();
    const cookies = new RequestCookies(requestHeaders);

    when(mockedRequest.headers).thenReturn(requestHeaders);
    when(mockedRequest.cookies).thenReturn(cookies);
  });

  afterEach(() => {
    reset(mockedRequest);
    jest.restoreAllMocks(); // Reset Jest mocks
  });

  // and then test
  test("Passes request along and sets auth cookies", async () => {
    const url = new URL("/profile", domain);
    const nextUrl = new NextURL(url);
    when(mockedRequest.nextUrl).thenReturn(nextUrl);

    const mockAuthTokens = {
      access_token: "something secret",
      refresh_token: "foo",
    };

    jest
      .spyOn(AuthService.prototype, "handleRequestCheckAuthenticate")
      .mockResolvedValue(mockAuthTokens);

    const response: NextResponse<unknown> = await middleware(
      instance(mockedRequest),
    );

    expect(response).toBeDefined();
    expect(response.status).toBe(200);
    expect(response.cookies.get("access_token")?.value).toBe(
      mockAuthTokens.access_token,
    );
    expect(response.cookies.get("refresh_token")?.value).toBe(
      mockAuthTokens.refresh_token,
    );
  });
});

// auth.service.ts

import { NextRequest } from "next/server";
import { delay } from "./utils";

export default class AuthService {
  constructor() {}

  public async checkAuthen(): Promise<{
    access_token: string;
    refresh_token: string;
  }> {
    await delay(2000);
    return {
      access_token:
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJPbmxpbmUgSldUIEJ1aWxkZXIiLCJpYXQiOjE3NDI0NDk3NzQsImV4cCI6MTc3Mzk4NTc3NCwiYXVkIjoid3d3LmV4YW1wbGUuY29tIiwic3ViIjoianJvY2tldEBleGFtcGxlLmNvbSIsIkdpdmVuTmFtZSI6IkpvaG5ueSIsIlN1cm5hbWUiOiJSb2NrZXQiLCJFbWFpbCI6Impyb2NrZXRAZXhhbXBsZS5jb20iLCJSb2xlIjpbIk1hbmFnZXIiLCJQcm9qZWN0IEFkbWluaXN0cmF0b3IiXX0.mv7Jg9lxwME6gvbtcBFq-LQE1l3hAxiSWPgcnmHl2IQ",
      refresh_token:
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJPbmxpbmUgSldUIEJ1aWxkZXIiLCJpYXQiOjE3NDI0NDk3NzQsImV4cCI6MTc3Mzk4NTc3NCwiYXVkIjoid3d3LmV4YW1wbGUuY29tIiwic3ViIjoianJvY2tldEBleGFtcGxlLmNvbSIsIkdpdmVuTmFtZSI6IkpvaG5ueSIsIlN1cm5hbWUiOiJSb2NrZXQiLCJFbWFpbCI6Impyb2NrZXRAZXhhbXBsZS5jb20iLCJSb2xlIjpbIk1hbmFnZXIiLCJQcm9qZWN0IEFkbWluaXN0cmF0b3IiXX0.mv7Jg9lxwME6gvbtcBFq-LQE1l3hAxiSWPgcnmHl2IQ",
    };
  }

  public checkIsAuthenticated(request: NextRequest) {
    const isAuthenticated = !!request.cookies.get("access_token");
    return isAuthenticated;
  }

  public async handleRequestCheckAuthenticate(): Promise<{
    access_token: string;
    refresh_token: string;
  }> {
    return await this.checkAuthen();
  }
}
export const authService = new AuthService();