How to test next.js page using useRouter() with jest

JavaScript
1

Hello everyone, after I have my next.js 13 app ready I start with jest testing. I have all necessary dependencies installed and want to begin with a test for my register functionallity. In my register page I use useRouter to push the user after registration to the login page. Here begins the first issue and I have read everything I found in the net, but not found a solution. This is my test:

jest.mock('next/navigation', () => ({
    useRouter: () => ({
      push: jest.fn(),
      events: {
        on: jest.fn(),
        off: jest.fn(),
        emit: jest.fn(),
      },
      isFallback: false,
    }),
  }));
describe("Register has all its elements",()=>{
    it("Find all inputs in the register",()=>{
        render(<Register/>)
        const vorname = screen.getByRole("textbox",{
            name:"vorname"
        })
        const nachname = screen.getByRole("textbox",{
            name:"nachname"
        })
        const username = screen.getByRole("textbox",{
            name:"username"
        })
        const email = screen.getByRole("textbox",{
            name:"email"
        })
        const password = screen.getByLabelText("Passwort")
        const passwordValidation = screen.getByLabelText("Passwort validieren");

        expect(vorname).toBeInTheDocument();
        expect(nachname).toBeInTheDocument();
        expect(username).toBeInTheDocument();
        expect(email).toBeInTheDocument();
        expect(password).toBeInTheDocument();
        expect(passwordValidation).toBeInTheDocument();
    })
})

But I have an error when running this test:

 invariant expected app router to be mounted

      16 | const Register = () => {
    > 17 |   const router = useRouter();

So I googled and found different comments, but no answer worked for me. The last what I tried was:

 jest.mock("next/navigation", () => ({
    useRouter() {
      return {
        prefetch: () => null
      };
    }
  }));

It would be nice when someone could help me out. Thanks

2

Are you using the next-router-mock package?

Shouldn’t it be jest.mock('next/router', () => )

3

Thanks for your response, but in next.js 13.5.6 it is recommended to use useRouter from next/navigation. I tried in the test also to use useRouter from next/router, but this works not. I searched the entire day for information, but I always get the same error. Now I don’t know if perhaps a dependency is not working properly. I installed the dependencies like they are current. This article you suggested I have also read, but found no solution for this problem. The code in my app works properly, so there must be something in the test.

4

Did you look at the package?

I don’t have any first-hand experience with it, but it is only for the mocking, not the app. The 'next/router' was based on the docs pages.

If used in a test, mock out the router by mocking the next/router’s useRouter() hook.

If used in the app directory, migrate to the new hooks imported from next/navigation.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.