NextJS v12.2.0 causing Router null reference issues when running JEST tests-CodePudding

The Problem

I'm upgrading from NextJS v12.1.6 to v12.2.2 and all but one test file has upgraded successfully.

When running the BreadcrumbTrail test suite the test included below breaks around the routing. The issue states you cannot push to a null object; this makes sense but after debugging everything looks OK. There is a secondary issue but I believe it's a cascading problem caused by the null reference error (included anyway).

Questions

Has anyone hit an error around routing in v12.2.0?
Does anyone have a suggestion on resolving this issue?

Basic Stack Details

React v18.2.0
Next v12.2.0
JEST v28.1.1

Attempted Solutions/Reading

Prior to v12.2.0 this test passed without issue.

From what I've found PR 36660 resolved an issue with asPath due to a race condition but may now be causing our current issues.

Test Code

import { render, screen, within, waitFor } from "@testing-library/react";
import singletonRouter from "next/router";
import mockRouter from "next-router-mock";
import userEvent from "@testing-library/user-event";
import { BreadcrumbTrail } from "./BreadcrumbTrail";

jest.mock("next/dist/client/router", () => require("next-router-mock"));

const navPath = "/some-navpath";

describe("BreadcrumbTrail", function () {
  beforeEach(() => {
    mockRouter.setCurrentUrl(navPath);
  });

  it("navigates to the correct location when clicking on a crumb", async function () {
    render(<BreadcrumbTrail />);
    const breadcrumbs = screen.getByRole("list", { name: /breadcrumbs/i });
    const { getByText } = within(breadcrumbs);
    const breadcrumb = getByText("Foo");

    await userEvent.click(breadcrumb);

    await waitFor(() =>
      expect(singletonRouter).toMatchObject({
        asPath: "/someother-navpath",
      }),
    );
  });
});

Error One

FAIL  components/Navigation/BreadcrumbTrail.test.tsx

Console

 console.error
   Error: Uncaught [TypeError: Cannot read property 'push' of null]

...
...
...

EventTarget.js:241:34)
   at dispatchEvent (/<Repository Path>/node_modules/@testing-library/user-event/dist/index.cjs:1716:33)
   at /<Repository Path>/node_modules/@testing-library/react/dist/pure.js:125:16
   at /<Repository Path>/node_modules/@testing-library/react/dist/act-compat.js:110:24
   at act (/<Repository Path>/node_modules/react/cjs/react.development.js:2457:20) {
     detail: TypeError: Cannot read property 'push' of null
        at navigate (/<Repository Path>/node_modules/next/dist/client/link.js:90:11)
        at linkClicked (/<Repository Path>/node_modules/next/dist/client/link.js:100:5)
        at onClick (/<Repository Path>/node_modules/next/dist/client/link.js:330:9)
        at HTMLUnknownElement.callCallback (/<Repository Path>/node_modules/react-dom/cjs/react-dom.development.js:730:119)

...
...
...

BreadcrumbTrail › navigates to the correct location when clicking on a crumb

    TypeError: Cannot read property 'push' of null

      40 |     const breadcrumb = getByText("Foo");
      41 |
    > 42 |     await userEvent.click(breadcrumb);

Error Two

expect(received).toMatchObject(expected)

- Expected  - 1
  Received    1

Object {
-   "asPath": "/someother-navpath",
    "asPath": "/some-navpath",
}

CodePudding user response：

It's a problem within next-router-mock; this package has broken due to significant changes in how routing is managed in NextJS.

Source: Issue with next/link in Next 12.2.0

The following code should fix the issue

jest.mock("next/dist/client/router", () => require("next-router-mock"));

jest.mock("next/dist/shared/lib/router-context", () => {
  const { createContext } = require("react");
  const router = require("next-router-mock").default;
  const RouterContext = createContext(router);
  return { RouterContext };
});