How to mock usePathname and useRouter from next-intl client in Jest?

[chrislicodes]

Hey, I have a component which is using usePathname and useRouter from "next-intl/client".

I just cannot get jest working, not sure what I am overlooking, I tried it like this:

// If the tested component uses features from Next.js, you have to mock them.
// Note that next-intl only has an optional dependency on Next.js.
jest.mock('next/navigation', () => ({
  useRouter() {
    return {
      push: () => jest.fn(),
      replace: () => jest.fn(),
    };
  },
}));

jest.mock('next/navigation', () => ({
  usePathname() {
    return '';
  },
}));

jest.mock('next-intl/client', () => ({
  useRouter() {
    return {
      push: () => jest.fn(),
      replace: () => jest.fn(),
    };
  },
}));

jest.mock('next-intl/client', () => ({
  usePathname() {
    return '';
  },
}));

jest.mock('next/router', () => ({
  useRouter() {
    return {
      push: () => jest.fn(),
      replace: () => jest.fn(),
    };
  },
}));

jest.mock('next/router', () => ({
  usePathname() {
    return '';
  },
}));

But I always encounter

(0 , _client.useRouter) is not a function
TypeError: (0 , _client.useRouter) is not a function

Any hints on what I can do? 🤔

[chrislicodes]

Ah nevermind, they just have to go into the same mock call 🫡

jest.mock('next-intl/client', () => ({
  useRouter() {
    return {
      push: () => jest.fn(),
      replace: () => jest.fn(),
    };
  },
  usePathname() {
    return '';
  },
}));

[ghost]

How do you update the pathname for different paths?

[tnyo43]

@GeorgeDMFincher You can use mock implementation of jest.fn to set the different pathname for each test.

const mockUsePathname = jest.fn();

jest.mock('next/navigation', () => ({
  usePathname() {
    return mockUsePathname();
  },
}));

test('with the pathname of "/home"', () => {
  mockUsePathname.mockImplementation(() => '/user');

  // ...
});

test('with the pathname of "/blogs/100"', () => {
  mockUsePathname.mockImplementation(() => '/blogs/100');

  // ...
});