Mock next/navigation

[marcoswebmasteroficial]

Summary

`const useRouter = jest.spyOn(require('next/router'), 'useRouter') let push: jest.Mock<any, any>

beforeEach(() => {
push = jest.fn()
useRouter.mockReturnValue({
query: {},
push: push
})
})
` before the update it used like this now it doesn't work anymore as it would in nextjs13? using next/navigation

Additional information

No response

Example

No response

[marcoswebmasteroficial]

jest.mock('next/navigation', () => {
  return {
    __esModule: true,
    useRouter: () => ({
      push: jest.fn(),
      replace: jest.fn(),
      prefetch: jest.fn()
    }),
    useSearchParams: () => ({
      get: () => {}
    })
  }
})
``` solution

[joshualeduc]

I have tried doing this same thing, where in my index.test.js file I have

import { useRouter, useSearchParams } from 'next/navigation';
jest.mock('next/navigation', () => ({
  __esModule: true,
  useRouter: () => ({
    push: jest.fn(),
    replace: jest.fn(),
    prefetch: jest.fn(),
    isFallback: false,
  }),
  useSearchParams: () => ({
    get: () => {},
    query: {
      taskId: 'testId',
    },
  }),
}));

But every time I try to run a test with that block of code, I get this error Uncaught [TypeError: (0 , _navigation.useServerInsertedHTML) is not a function]. Was anything else needed to mock things from 'next/navigation' correctly? Is it safe to just through a useServerInsertedHTML: jest.fn(), in that mock returned object?

I'm still a bit new to next.js, and I'm just wondering why I would need to add that useServerInsertedHTML: jest.fn() when others don't. I thought I was just using the default settings with the new app folder...

[marcoswebmasteroficial]

não existe query: {
taskId: 'testId',
}, em useSearchParams

[Focus-me34]

I mean, this looks good @marcoswebmasteroficial, unfortunately, it doesn't work. Personally, I keep having this same error:

invariant expected app router to be mounted

      18 |   const isInView = useInView(ref, { once: true, amount: 1 });
      19 |   const imgAnimation = useAnimationControls();
    > 20 |   const router = useRouter();
         |                  ^
      21 |
      22 |   const routerHandler = (url) => {
      23 |     router.push(url);

I use Next.js v13.4.6 with node v20.2.0 and, App router, no src folder and useRouter imported from next/navigation package.

If anyone has a solution or even an idea, I'll take it because as is, it's just impossible for me to test my Next app. What a shame. 😭

NB: When i try logging "useRouter", i see in the console this error:

  TypeError: Cannot read properties of null (reading 'useContext')

      15 |
      16 |   it("renders the Home page", () => {
    > 17 |     console.log(useRouter())
         |                 ^
      18 |     // const router = useRouter();
      19 |
      20 |         jest.mock("next/navigation", () => {

Could be a big hint that the app is not ready or something like that? I don't really know...

---

FIXED: Check the only solution that works for me here: #48937 (comment) 🔥

[livalex]

jest.mock('next/navigation', () => {
  return {
    __esModule: true,
    useRouter: () => ({
      push: jest.fn(),
      replace: jest.fn(),
      prefetch: jest.fn()
    }),
    useSearchParams: () => ({
      get: () => {}
    })
  }
})
``` solution

God bless you, this worked for me!

[gdibble]

solution

Thank you sooooo much ❤️

This solved my problem

I made one addition with usePathname which is also a new navigation API method:

/** New next/navigation mock */
jest.mock('next/navigation', () => {
  return {
    __esModule: true,
    usePathname: () => ({
      pathname: '',
    }),
    useRouter: () => ({
      push: jest.fn(),
      replace: jest.fn(),
      prefetch: jest.fn(),
    }),
    useSearchParams: () => ({
      get: () => {}
    })
  }
})

[J-P-Dorman]

Adding on to this in case it helps anyone, I also had to mock useServerInsertedHTML

jest.mock('next/navigation', () => {
  return {
    __esModule: true,
    usePathname: () => ({ pathname: '' }),
    useRouter: () => ({
      push: jest.fn(),
      replace: jest.fn(),
      prefetch: jest.fn()
    }),
    useSearchParams: () => ({ get: () => {} }),
    useServerInsertedHTML: jest.fn()
  };
});

[owenizedd]

I'm using Map for useSearchParams to mock the API more accurate in case you use like searchParams.forEach(...) or searchParams.entries() function:

jest.mock('next/navigation', () => {
  return {
    __esModule: true,
    usePathname: () => ({ pathname: '' }),
    useRouter: () => ({
      push: jest.fn(),
      replace: jest.fn(),
      prefetch: jest.fn()
    }),
    useSearchParams: jest.fn().mockReturnValue(new Map()),
    useServerInsertedHTML: jest.fn()
  };
});

[tar-aldev]

Did anyone have any luck mocking this in cypress? cy.stub doesn’t do anything to next/navigation 😡

[vonvick]

Here is what I tried and what worked for me:

const mockRouterReplace = jest.fn();
const mockRouterRefresh = jest.fn();
const mockRouterPush = jest.fn();

jest.mock('next/navigation', () => {
  const originalModule = jest.requireActual('next/navigation');
  return {
    __esModule: true,
    ...originalModule,
    useRouter: jest.fn().mockImplementation(() => {
      return {
        push: mockRouterPush,
        replace: mockRouterReplace,
        refresh: mockRouterRefresh
      };
    }),
    useSearchParams: jest.fn().mockImplementation(() => {
      return new URLSearchParams(window.location.search);
    }),
    usePathname: jest.fn().mockImplementation((pathArg) => {
      return pathArg;
    })
  };
});

Then in your tests you can use it like so:
These are examples of how you can use it

afterEach(() => {
  mockRouterRefresh.mockRestore();
  mockRouterReplace.mockRestore();
  mockRouterPush.mockRestore();
});

it('calls the router push method', async() => {
  expect(mockRouterPush).toHaveBeenCalledTimes(1);
  expect(mockRouterPush).toHaveBeenCalledWith('/'); // Route Push argument
});

it('calls the router replace method', async() => {
  expect(mockRouterReplace).toHaveBeenCalledTimes(1);
  expect(mockRouterReplace).toHaveBeenCalledWith('/home'); // Route Replace argument
});

it('calls the router push method', async() => {
  expect(mockRouterReset).toHaveBeenCalledTimes(1);
});

[machine0x01]

thanks