How to mock useRouter from next/navigation?

[lawrence-cruz]

Summary

Hi everyone, good day! I am trying to test my login page to see if it renders correctly, but somehow I received an error.

"Error: invariant expected app router to be mounted"


login-form.jsx

"use client"
... // other imports
import { useRouter, useSearchParams } from "next/navigation";

export function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const onSubmit = (data) => {
    // Insert logic here
  }

  return <form onSubmit={handleSubmit(onSubmit)}>...</form>
}

login-form.test.jsx

import { render, screen } from "@testing-library/react";
import { LoginForm } from "login-form";

import "@testing-library/jest-dom";

describe("Login Form", () => {
  it("should have required fields and submit button", () => {
     render(<LoginForm />);

     const emailField = screen.getByLabelText("Email");
     const passwordField = screen.getByLabelText("Password");
     const submitButton = screen.getByRole("button");

     expect(emailField).toBeInTheDocument();
     expect(passwordField).toBeInTheDocument();
     expect(submitButton).toBeInTheDocument();
  });
});

Item	Version
Next	13.3.1
Jest	29.5.0

I tried solutions from this discussion (#23034), but they are using useRouter from "next/router".

Thank you in advance!
P.S. I am using app directory

Additional information

No response

Example

No response

[ted-marozzi]

You can mock the entire module, heres how I did it with vitest. I just mocked out enough for my tests to pass so the implementations are empty but you could provide a better/more useful mock if you wished.

vi.mock("next/navigation", () => {
  const actual = vi.importActual("next/navigation");
  return {
    ...actual,
    useRouter: vi.fn(() => ({
      push: vi.fn(),
    })),
    useSearchParams: vi.fn(() => ({
      get: vi.fn(),
    })),
    usePathname: vi.fn(),
  };
});

[yoshiomiyamae]

I had the same issue and finally I solved with implementing the following provider mock:

// app-router-context-provider-mock.tsx

import {
  AppRouterContext,
  AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context';
import React from 'react';

export type AppRouterContextProviderMockProps = {
  router: Partial<AppRouterInstance>;
  children: React.ReactNode;
};

export const AppRouterContextProviderMock = ({
  router,
  children,
}: AppRouterContextProviderMockProps): React.ReactNode => {
  const mockedRouter: AppRouterInstance = {
    back: jest.fn(),
    forward: jest.fn(),
    push: jest.fn(),
    replace: jest.fn(),
    refresh: jest.fn(),
    prefetch: jest.fn(),
    ...router,
  };
  return (
    <AppRouterContext.Provider value={mockedRouter}>
      {children}
    </AppRouterContext.Provider>
  );
};

Then use it at in test:

import { render, screen } from "@testing-library/react";
import { LoginForm } from "login-form";
import { AppRouterContextProviderMock } from './app-router-context-provider-mock';

import "@testing-library/jest-dom";

describe("Login Form", () => {
  it("should have required fields and submit button", () => {
     const push = jest.fn();
     render(<AppRouterContextProviderMock router={{ push }}><LoginForm /></AppRouterContextProviderMock>);

     const emailField = screen.getByLabelText("Email");
     const passwordField = screen.getByLabelText("Password");
     const submitButton = screen.getByRole("button");

     expect(emailField).toBeInTheDocument();
     expect(passwordField).toBeInTheDocument();
     expect(submitButton).toBeInTheDocument();
  });
});

[seenivasanb]

Saved my time! Thank you

[brilliantmakanju]

Thank you @yoshiomiyamae it worked

[lawrence-cruz]

Marking this as an answer. Thank you @yoshiomiyamae!

[pkrakesh]

Cannot find module next/dist/shared/lib/app-router-context. I am using NextJS 14.2. Please help.

[yoshiomiyamae]

@pkrakesh The path had been changed as @aliyeysides mentioned.
#48937 (reply in thread)

[marcoswebmasteroficial]

Solution #53499

[C4rl0s]

I used this one https://www.npmjs.com/package/next-router-mock (suggested link) by NextJs docs https://nextjs.org/docs/messages/next-router-not-mounted

[adamward459]

My approach

import { render, screen } from '@testing-library/react';
import { redirect } from 'next/navigation';
import AuthProvider from '../AuthProvider';
import NeedAuthGuard from './NeedAuthGuard';

jest.mock('next/navigation', () => ({
  redirect: jest.fn(),
}));

function Component() {
  return <p>Component is present</p>;
}

describe('NeedAuthGuard', () => {
  const redirectMock = redirect as unknown as jest.Mock;

  it('should render children if jwt is present', () => {
    render(
      <AuthProvider _jwt="jwt">
        <NeedAuthGuard>
          <Component />
        </NeedAuthGuard>
      </AuthProvider>
    );

    expect(screen.getByText('Component is present')).toBeInTheDocument();
    expect(redirectMock).not.toHaveBeenCalled();
  });

  it('should redirect to /login if jwt is not present', () => {
    render(
      <AuthProvider>
        <NeedAuthGuard>
          <Component />
        </NeedAuthGuard>
      </AuthProvider>
    );

    expect(redirectMock).toHaveBeenCalledWith('/login');
  });
});

[OlehDutchenko]

My approach with Vitest:

import { render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { LocaleSwitcher } from '../index';

const { useRouter, mockedRouterPush } = vi.hoisted(() => {
    const mockedRouterPush = vi.fn();
    return {
        useRouter: () => ({ push: mockedRouterPush }),
        mockedRouterPush,
    };
});

vi.mock('next/navigation', async () => {
    const actual = await vi.importActual('next/navigation');
    return {
        ...actual,
        useRouter,
    };
});

describe('LocaleSwitcher', () => {
    it('should programmatically redirect after selecting locale', () => {
        render(<LocaleSwitcher />);
        // ... 
        // ... emulates user interaction according to your component's behavior ...
        // ... 
        expect(mockedRouterPush).toHaveBeenCalledWith(expectedUrl);
    });
});

[supertgo]

Thank you!!

[martin-opensky]

Thank you!

[geraldofori]

Thank you so much. Saved me a lot of stress lol

[yguenduez]

Solved it for me! Thanks

[lawrence-cruz]

Hello everyone, good day! Sorry for the delayed response, I was occupied with other projects. Anyway, I want to thank everyone who made an effort to answer my question. I appreciate it.

I tested all the provided solutions, and @yoshiomiyamae 's answer successfully resolved the problem.

Thank you, and have a nice day, everyone!

[olaj]

I've made a Cypress Component Test version of #48937 (comment)

import React from "react";

import {
  AppRouterContext,
  AppRouterInstance,
} from "next/dist/shared/lib/app-router-context.shared-runtime";

export type AppRouterContextProviderMockProps = {
  router: Partial<AppRouterInstance>;
  children: React.ReactNode;
};

export const AppRouterContextProviderMock = ({
  router,
  children,
}: AppRouterContextProviderMockProps): React.ReactNode => {
  const mockedRouter: AppRouterInstance = {
    back: cy.spy().as("back"),
    forward: cy.spy().as("forward"),
    push: cy.spy().as("push"),
    replace: cy.spy().as("replace"),
    refresh: cy.spy().as("refresh"),
    prefetch: cy.stub().as("prefetch").resolves(),
    ...router,
  };
  return (
    <AppRouterContext.Provider value={mockedRouter}>
      {children}
    </AppRouterContext.Provider>
  );
};

const setup = () => {

  const push = cy.spy().as("push");

  cy.mount(
    <UserProvider>
      <AppRouterContextProviderMock router={{ push }}>
        <RootContextProvider
          browserLanguagesDefault={["en"]}
          randomSessionId="hej"
        >
          ....
        </RootContextProvider>
      </AppRouterContextProviderMock>
    </UserProvider>,
  );
};

describe("<AppListItem/>", () => {
  it("should render", () => {
    setup();
  });
});