TypeError: router.back is not a function

Question

I'm testing the next.js back route navigation. But I'm getting this error when running the test:

The back function:

     const router = useRouter();

     const handleClick = useCallback(() => {
         if (router) {
           router.back();
         }
       }, [router]);

Here's my test:

  it("should go back", async () => {

      const { baseElement } = render(<PageNotFound appTitle={"AppTitle"} />);
      expect(baseElement).toBeTruthy();

      expect(screen.getByText("Back")).toBeTruthy();
      const backElement = screen.getByText("Back");

      fireEvent.click(backElement);
      expect(screen.findByText("All Systems Operational")).toBeTruthy();

  });

score 0 · Accepted Answer · answered Jun 29 '22 at 09:02

I solved this by mocking the back function on "next/router"

    jest.mock("next/router", () => ({
      useRouter() {
        return {
            route: "/status",
            pathname: "/status",
            query: "",
            asPath: "",
            back: ()=>{return "/status"}
        };
      },
     }));

TypeError: router.back is not a function

1 Answers1