How to test next/navigation?

[KushibikiMashu]

I love writing tests. When I was migrating next/router to next/navigation, I found I didn't know how to write tests on next/navigation.

next-router-mock doesn't support next/navigation for now. I'd like to hear how folks handle this problem.

related

• Making `next/router` and `next/link` more testable #38248
• How to mock useRouter? #23034

[red2678]

Bump

[Miloshinjo]

Try this with next-router-mock. I'm using vitest, but similar thing can be done with Jest I guess.

vi.mock('next/navigation', () => require('next-router-mock'));

Tests pass for me at least I'm not blocked.

[DonikaV]

I am trying

jest.mock('next/navigation', () => ({
  ...require('next-router-mock'),
  useSearchParams: () => [new URLSearchParams({ revalidate: '1' })],
}));

But getting :
Failed to construct 'URLSearchParams': parameter 1 sequence's element does not contain exactly two elements.
TypeError: Failed to construct 'URLSearchParams': parameter 1 sequence's element does not contain exactly two elements.

[u1810291]

@DonikaV

The error message suggests that there is an issue with the parameter passed to the URLSearchParams constructor, which requires key-value pairs. The parameter seems to have only one key-value pair, which is causing the error.

To resolve the issue, you can try wrapping the object passed to URLSearchParams constructor with an array to make it a key-value pair like this:

  jest.mock('next/navigation', () => ({
    ...require('next-router-mock'),
    useSearchParams: () => [[{ revalidate: '1' }]],
  }));

This should ensure that the URLSearchParams constructor receives a key-value pair as required, resolving the error.

[DonikaV]

Hey, thanks, yes i did the same yesterday.

jest.mock('next/navigation', () => ({
  ...require('next-router-mock'),
  useSearchParams: () => jest.fn(),
}));

[hallucinogenizer]

Here's how I mocked usePathname along with useRouter using @DonikaV's comment above:

import { useRouter } from "next-router-mock";

jest.mock("next/navigation", () => ({
  useRouter,
  usePathname: jest.fn().mockReturnValue('/some-route'),
}));

[kiyui]

So far I've been able to get by doing this:

const nextRouterMock = require('next-router-mock')

jest.mock('next/router', () => nextRouterMock)

jest.mock('next/navigation', () => {
  const { useRouter } = nextRouterMock
  const usePathname = () => {
    const router = useRouter()
    return router.pathname
  }

  const useSearchParams = () => {
    const router = useRouter()
    return new URLSearchParams(router.query)
  }

  return {
    useRouter,
    usePathname,
    useSearchParams
  }
})

[ldeveber]

I made a next-router-utils.ts which I export mockRouter for use in my tests:

import mockRouter from "next-router-mock";
import { createDynamicRouteParser } from "next-router-mock/dynamic-routes";

jest.mock("next/router", () => jest.requireActual("next-router-mock"));

mockRouter.useParser(
  createDynamicRouteParser([
    // @see https://github.com/scottrippey/next-router-mock#dynamic-routes
  ])
);

jest.mock<typeof import("next/navigation")>("next/navigation", () => {
  const actual = jest.requireActual("next/navigation");
  const nextRouterMock = jest.requireActual("next-router-mock");
  const { useRouter } = nextRouterMock;
  const usePathname = jest.fn().mockImplementation(() => {
    const router = useRouter();
    return router.asPath;
  });

  const useSearchParams = jest.fn().mockImplementation(() => {
    const router = useRouter();
    return new URLSearchParams(router.query);
  });

  return {
    ...actual,
    useRouter: jest.fn().mockImplementation(useRouter),
    usePathname,
    useSearchParams,
  };
});

export { mockRouter };

This is based off @kiyui 's implementation(THANK YOU!!), but expanded to have actual mock functions and add support for dynamic routes.

[Naveenkumar-asokan]

Can you give me a example for adding the redirect function from next/navigation

[alexconsunjicfa]

Is there any way of doing this without using the next-router-mock package? Its not tested against Next 14 and we're having some issues with useSearchParams

[alamenai]

Is anyone know how to do it in Next + Cypress:

This is my code:

import { costCalculationApiUrl } from "@/constants/urls"
import { jest } from "@jest/globals"
import { useRouter, useSearchParams } from "next/navigation"
import { Provider, useSelector } from "react-redux"

import { RootState, store } from "@/redux/store"

import { Analytics } from "../../components"
import { format2APIDate } from "../../helpers"

describe("", () => {
  it("should load data successfully without encountering a 422 error", () => {
    // Mount your component
    cy.mount(
      <Provider store={store}>
        <Analytics />
      </Provider>
    )
  })
})

[ClumsyVlad]

Bump, seems like next-router-mock doesn't work with next v14 yet.

[prajwal-negi-notjuzapp]

tried to mock the useSearchParams function like this:
useSearchParams: () => new URLSearchParams({}),

still doesn't work, can't get it to work and it's producing error:
TypeError: t is not a functionJest

any lead of how can test it properly?

[ajinkyabhise]

namespace is not as value jest

[hugosimoesdev]

you can import jest:

import { jest } from "@jest/globals";

[jpb06]

In case someone is looking for a solution with next 14 🙇🏻

import { useSearchParams } from 'next/navigation';

const MyComponent = () => {
  const searchParams = useSearchParams();
  const status = searchParams.get('status');

  // ...
}

import * as mockRouter from 'next-router-mock';

const useRouter = mockRouter.useRouter;

jest.mock('next/navigation', () => ({
  ...mockRouter,
  useSearchParams: () => {
    const router = useRouter();
    const path = router.query;
    return new URLSearchParams(path as never);
  },
}));

describe('MyComponent', () => {
  it('should render with a "status" search param having the "cool" value ...', () => {
    mockRouter.default.push('/?status=cool');

    render(<MyComponent />);

    // ...
  });
});

[luke-h1]

I seem to get the following error TypeError: Cannot destructure property 'useRouter' of 'mockRouter' as it is undefined. just wondering if you have wrapped anything in a provider or encountered this error yourself?

[ncksllvn]

Small change to the above code that got it working for us at [email protected], [email protected] using TypeScript

// __mocks__/next/navigation.ts

const nextRouterMock = jest.requireActual(
  'next-router-mock'
) as typeof import('next-router-mock');

const { useRouter: useRouterMock } = nextRouterMock;

const usePathname = jest.fn().mockImplementation(() => {
  const router = useRouterMock();
  return router.pathname;
});

const useSearchParams = jest.fn().mockImplementation(() => {
  const router = useRouterMock();
  return new URLSearchParams(router.query as Record<string, string>);
});

const useRouter = jest.fn().mockImplementation(useRouterMock);

export { useRouter, usePathname, useSearchParams };