How to mock useRouter?

[nikitowsky]

Question about Next.js

I'm want to make sure my component renders correctly with useRouter hook (actually I'm trying to understand how new dynamic routing works), so I have code:

import React from 'react';
import { NextPage } from 'next';
import { useRouter } from 'next/router';

const UserInfo : NextPage = () => {
  const router = useRouter();
  const { query } = router;

  return <div>Hello {query.user}</div>;
};

export default UserInfo;

And what I'm trying is:

// test
import { render, cleanup, waitForElement } from '@testing-library/react';

import UserInfo from './$user';

// somehow mock useRouter for $user component!!!

afterEach(cleanup);

it('Should render correctly on route: /users/nikita', async () => {
  const { getByText } = render(<UserInfo />);

  await waitForElement(() => getByText(/Hello nikita!/i));
});

But I get an error TypeError: Cannot read property 'query' of null which points on const router = useRouter(); line.

P. S. I know dynamic routing is available on canary verions just for now and might change, but I get a problem with router, not with WIP feature (am I?).

[ijjk]

Hi, this feature is still experimental but useRouter uses React.useContext to consume the context from next-server/dist/lib/router-context. To mock it you would need to wrap it in the context provider from there similar to this line

[nikitowsky]

@ijjk Hi, thank you!
I don't know if I'm doing it right, but test passes 😂

import { render, cleanup, waitForElement } from '@testing-library/react';
import { createRouter } from 'next/router';
import { RouterContext } from 'next-server/dist/lib/router-context';

const router = createRouter('', { user: 'nikita' }, '', {
  initialProps: {},
  pageLoader: jest.fn(),
  App: jest.fn(),
  Component: jest.fn(),
});

import UserInfo from './$user';

afterEach(cleanup);

it('Should render correctly on route: /users/nikita', async () => {
  const { getByText } = render(
    <RouterContext.Provider value={router}>
      <UserInfo />
    </RouterContext.Provider>,
  );

  await waitForElement(() => getByText(/Hello nikita!/i));
});

If there is more abstract way to mock query params, so I'd be able to pass actual route (/users/nikita for example) and pass path to file? What do you think?

[daveschinkel]

Nice simple test double. Love it. But you don't need jest.fn(), there is absolutely no need for it here or to be coupled to jest mocks. Just create a dummy: () => {} in place of jest.fn(). Get rid of jest magic.

[alamenai]

I did not find createRouter in next/router

[nikitowsky]

@ijjk that make sense. Thank you a lot!

[renellc]

Is there any way to mock useRouter using Enzyme+Jest? I've been searching online for a bit and the only relevant results that come up is this issue.

[francisprovost]

I managed to mock it this way.

import * as nextRouter from 'next/router';

nextRouter.useRouter = jest.fn();
nextRouter.useRouter.mockImplementation(() => ({ route: '/' }));

[maxpopovitch]

Does somebody know how to implement the same for Cypress?

[stigkj]

A little late answering here 😅 Not sure you can achieve the same thing in Cypress without building support for that into the application behind an if (NODE_ENV === 'development') ... for example.

What is your use case? You can at least verify what the router has done natively in Cypress with cy.location, cy.url or cy.hash.

[daveschinkel]

screw mocking frameworks and magic, just use the custom stub that @nikitowsky did. However I don't know that createRouter is used or available anymore. Looks like only useRouter is used now (hooks), is that right?

[steviewonders3]

jest.spyOn works for me too -

import React from 'react'
import { render } from '@testing-library/react'
import ResultsProductPage from 'pages/results/[product]'

const useRouter = jest.spyOn(require('next/router'), 'useRouter')

describe('ResultsProductPage', () => {
  it('renders - display mode list', () => {
    useRouter.mockImplementationOnce(() => ({
      query: { product: 'coffee' },
    }))
    const { container } = render(
      <ResultsProductPage items={[{ name: 'mocha' }]} />
    )
    expect(container).toMatchSnapshot()
  })
})

[aeksco]

I ended up mocking it like this, I only need the useRouter export so this worked well enough for my purposes:

jest.mock("next/router", () => ({
    useRouter() {
        return {
            route: "/",
            pathname: "",
            query: "",
            asPath: "",
        };
    },
}));

[maxpopovitch]

Does somebody know how to implement the same for Cypress?

[im-ghost]

So how do I check if the routing was successful,if it was called with /route

[t-lock]

If anyone is here looking to mock useRouter simply to avoid interference from an imperative prefetch, then this dead simple mock will work

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

an example use case would be a form component that includes something like:

  const router = useRouter();
  useEffect(() => {
    router.prefetch("/success");
    if (confirmSuccess) {
      doStuff();
      router.push( {pathname: "/success" } )
    }
  }, [data]);

[chrisfosterelli]

@ijjk Has that behaviour changed in the latest version? I had to import from next/dist/next-server/lib/router-context. It wouldn't recognize the context if I installed next-server separately.

[ghost]

I have the same exact problem.
We're under next 9. None of the solutions using the RouterContext.Provider actually work.
The only way my test pass is using @aeksco solution as a global object above the test. Otherwise useRouter is always undefined.
This is not ideal as I cannot set different parameters for my test.
Any ideas on this ?

EDIT
I made it work with a global mock of the next/router import and a spyOn on the mock, which allows me to call mockImplementation(() => ({// whatever you want}) in each test.
It looks something like :

jest.mock("next/router", () => ({
  useRouter() {
    return {
      route: "",
      pathname: "",
      query: "",
      asPath: "",
    };
  },
}));

const useRouter = jest.spyOn(require("next/router"), "useRouter");

Then in the tests :

useRouter.mockImplementation(() => ({
      route: "/yourRoute",
      pathname: "/yourRoute",
      query: "",
      asPath: "",
    }));

This is not ideal but at least it works for me

[chrisfosterelli]

FWIW this is what I've settled on:

import { RouterContext } from 'next/dist/next-server/lib/router-context'
import { action } from '@storybook/addon-actions'
import PropTypes from 'prop-types'
import { useState } from 'react'
import Router from 'next/router'

function RouterMock({ children }) {
  const [pathname, setPathname] = useState('/')

  const mockRouter = {
    pathname,
    prefetch: () => {},
    push: async newPathname => {
      action('Clicked link')(newPathname)
      setPathname(newPathname)
    }
  }

  Router.router = mockRouter

  return (
    <RouterContext.Provider value={mockRouter}>
      {children}
    </RouterContext.Provider>
  )
}

RouterMock.propTypes = {
  children: PropTypes.node.isRequired
}

export default RouterMock

I needed something that worked both in Storybook and in Jest. This seems to do the trick, you just set <Routermock> somewhere up the component tree. It's not ideal because I don't love overriding Router.router constantly.

I think an official mocking solution would be lovely :)

[vikky-noelle]

Will this work in a case where I need to imitate a URL change, so If I change window.location. Will that URL change be reflected in the router?

[mbrowne]

@smasontst's method worked for us, but be careful with mockImplementationOnce()...if your component needs to render more than once during your test, you'll find that it's not using your mock router on the second render and your test will fail. It's probably best to always use mockImplementation() instead, unless you have a specific reason to use mockImplementationOnce().

[aeksco]

I had to revise my initial implementation since I needed unique useRouter state on a test-by-test basis. Took a page from the example provided by @nterol24s and updated it to act as a utility function I can call within my tests:

// Mocks useRouter
const useRouter = jest.spyOn(require("next/router"), "useRouter");

/**
 * mockNextUseRouter
 * Mocks the useRouter React hook from Next.js on a test-case by test-case basis
 */
export function mockNextUseRouter(props: {
    route: string;
    pathname: string;
    query: string;
    asPath: string;
}) {
    useRouter.mockImplementationOnce(() => ({
        route: props.route,
        pathname: props.pathname,
        query: props.query,
        asPath: props.asPath,
    }));
}

I can now do things like:

import { mockNextUseRouter } from "@src/test_util";

describe("Pricing Page", () => {
    
    // Mocks Next.js route
    mockNextUseRouter({
        route: "/pricing",
        pathname: "/pricing",
        query: "",
        asPath: `/pricing?error=${encodeURIComponent("Uh oh - something went wrong")}`,
    });

    test("render with error param", () => {
        const tree: ReactTestRendererJSON = Renderer.create(
            <ComponentThatDependsOnUseRouter />
        ).toJSON();
        expect(tree).toMatchSnapshot();
    });
});

Note the comment by @mbrowne - you'll hit the same issue with this approach, but you can split the example above into mockNextUseRouter and mockNextUseRouterOnce functions if you need.

Also a BIG 👍 for an official mocking solution @timneutkens

[mattcarlotta]

For anyone who wants a globally mocked Router instance, you can place a __mocks__ folder anywhere and target the next/router package like so:

__mocks__/next/router/index.js (has to follow this folder structure pattern!)

This example below targets Router.push and Router.replace:

jest.mock("next/router", () => ({
  // spread out all "Router" exports
  ...require.requireActual("next/router"),

  // shallow merge the "default" exports with...
  default: {
    // all actual "default" exports...
    ...require.requireActual("next/router").default,

    // and overwrite push and replace to be jest functions
    push: jest.fn(),
    replace: jest.fn(),
   },
}));

// export the mocked instance above
module.exports = require.requireMock("next/router");

Now, anywhere there's an import Router from "next/router"; it will be the mocked instance. You'll also be able to add mockImplementation functions on them since they'll be globally mocked.
If you want this instance to be reset for each test, then in your jest.json add a clearMocks property.

For reference, here's the Router structure if you want to target a specific export:

{
  __esModule: true,
  useRouter: [Function: useRouter],
  makePublicRouterInstance: [Function: makePublicRouterInstance],
  default: { 
    router: null,
    readyCallbacks: [ 
      [Function],
      [Function],
      [Function],
      [Function],
      [Function],
      [Function] 
    ],
    ready: [Function: ready],
    push: [Function],
    replace: [Function],
    reload: [Function],
    back: [Function],
    prefetch: [Function],
    beforePopState: [Function] },
    withRouter: [Function: withRouter],
    createRouter: [Function: createRouter],
    Router: { 
      [Function: Router]
      events: { 
        on: [Function: on],
        off: [Function: off],
        emit: [Function: emit] 
       } 
    },
    NextRouter: undefined 
  }
}

---

In addition, if you have to mount components that happen to utilize withRouter or useRouter and you don't want to mock them but still want to create some tests against/around them, then you can utilize this HOC wrapper factory function for testing:

import { createElement } from "react";
import { mount } from "enzyme";
import { RouterContext } from "next/dist/next-server/lib/router-context";
// Important note: The RouterContext import will vary based upon the next version you're using;
// in some versions, it's a part of the next package, in others, it's a separate package

/**
 * Factory function to create a mounted RouterContext wrapper for a React component
 *
 * @function withRouterContext
 * @param {node} Component - Component to be mounted
 * @param {object} initialProps - Component initial props for setup.
 * @param {object} state - Component initial state for setup.
 * @param {object} router - Initial route options for RouterContext.
 * @param {object} options - Optional options for enzyme's mount function.
 * @function createElement - Creates a wrapper around passed in component (now we can use wrapper.setProps on root)
 * @returns {wrapper} - a mounted React component with Router context.
*/
export const withRouterContext = (
  Component,
  initialProps = {},
  state = null,
  router = {
    pathname: "/",
    route: "/",
    query: {},
    asPath: "/",
  },
  options = {},
) => {
  const wrapper = mount(
    createElement(
      props => ( 
        <RouterContext.Provider value={router}>
          <Component { ...props } /> 
        </RouterContext.Provider>
      ),
      initialProps,
    ),
    options,
  );
  if (state) wrapper.find(Component).setState(state);
  return wrapper;
};

Example usage:

import React from "react";
import withRouterContext from "./path/to/reusable/test/utils"; // alternatively you can make this global
import ExampleComponent from "./index";

const initialProps = {
  id: "0123456789",
  firstName: "John",
  lastName: "Smith"
};

const router = {
  pathname: "/users/$user",
  route: "/users/$user",
  query: { user: "john" },
  asPath: "/users/john",
};

const wrapper = withRouterContext(ExampleComponent, initialProps, null, router);

...etc

Why use this? Because it allows you to have a reusable mounted React component wrapped in a Router context; and most importantly, it allows you to call wrapper.setProps(..) on the root component!

[gaurav5430]

What is require.requireMock and require.requireActual ?

[maxpopovitch]

Does somebody know how to mock useRouter for Cypress tests?

[ashkan-pm]

For the record I'm still having problems mocking useRouter in Jest and testing-library. I don't wanna use the spyOn approach and ignore eslint complaining about me using var requires

[mrcaidev]

This works for me:

// __mocks__/next/router.ts

import { Router } from "next/router";

export function useRouter() {
  const router: Partial<Router> = {
    route: "/",
    pathname: "",
    query: {},
    asPath: "",
    locale: "en-US",
    locales: ["en-US", "zh-CN"],
    defaultLocale: "en-US",
    push: jest.fn(),
    replace: jest.fn(),
  };
  return router;
}

No other codes required in *.test.ts files.

[marcomontalbano]

Looks like that with the new version >=12.2.0 mocking useRouter is no more enough.
https://github.com/vercel/next.js/pull/37238/files#diff-8acbf39f6c8f78de00c1be9339c3f839cd7f9a21f3c1d825cd23c14d4f11d718R12

Now the Link component is using RouterContext directly (before it was using useRouter).

import { RouterContext } from 'next/dist/shared/lib/router-context'
import Link from 'next/link'
import type { NextRouter } from 'next/router'

const createMockedRouter = (page: string): NextRouter => ({
  basePath: '',
  route: '/page/[page]',
  pathname: '/page/[page]',
  query: {
    page
  },
  asPath: `/page/${page}`,
  isLocaleDomain: false,
  push: jest.fn(() => Promise.resolve(true)),
  replace: jest.fn(() => Promise.resolve(true)),
  reload: jest.fn(),
  back: jest.fn(),
  prefetch: jest.fn(() => Promise.resolve()),
  beforePopState: jest.fn(),
  events: {
    emit: jest.fn(),
    on: jest.fn(),
    off: jest.fn()
  },
  isFallback: false,
  isReady: true,
  isPreview: false
})

test('should be able to change the query "page"', () => {
  const { container } = render(
    <RouterContext.Provider value={createMockedRouter('1')}>
      <Link href={{ query: { page: '4' } }}>Page 4</Link>
    </RouterContext.Provider>
  )

  expect(container).toContainHTML('<div><a href="/page/4">Page 4</a></div>')
})

[betopompolo]

I was using storybook and I was trying to test whether the preview mode is on or off.
I managed to test it by:

1. installing the storybook-addon-next
2. using useContext and mocking the values that the tests needs:

import { ComponentMeta, ComponentStory } from "@storybook/react";
import { RouterContext } from "next/dist/shared/lib/router-context";
import { useRouter } from "next/router";

export default {
  title: "MyComponent",
  component: MyComponent,
} as ComponentMeta<typeof MyComponent>;

export const Primary: ComponentStory<typeof MyComponent> = () => {
  const router = useRouter();
  const mockedRouter = {
    ...router,
    isPreview: true, // mocked value
  };

  return (
    <RouterContext.Provider value={mockedRouter}>
      <MyComponent />
    </RouterContext.Provider>
  );
};

[ManishSinghCoder]

I am using a jest + react testing library, if you guys mock the router and API calls
this solution work for me and I hope it's working for you guys!

import '@testing-library/jest-dom'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from 'react-query'
import AuthForm from '../src/components/auth-form'

// mock router

const mockPush = jest.fn()
const mockRouter = { push: mockPush }

// mock router
jest.mock('next/router', () => ({
useRouter: () => {
return mockRouter
},
}))

// mock the api call in next js
jest.mock('../src/queries/auth.query', () => ({
userLogin: () => {
return true
},
}))

describe('LoginPage', () => {
const queryClient = new QueryClient()

it('should render the login page', async () => {
render(



)
const inputNode = screen.getByLabelText('Email', { selector: 'input' })
const passwordNode = screen.getByLabelText('Password', { selector: 'input' })
fireEvent.change(inputNode, { target: { value: '[email protected]' } })
fireEvent.change(passwordNode, { target: { value: 'emailPassword' } })

expect(inputNode).toHaveValue('[email protected]')
expect(passwordNode).toHaveValue('emailPassword')

if (inputNode && passwordNode) {
  fireEvent.click(
    screen.getByRole('button', {
      name: /Login/i,
    })
  )

// mock router
await waitFor(() => expect(mockPush).toHaveBeenCalledWith('/profile', undefined, { shallow: true }))
}
})
})

[Lazercat]

adding to the conversation here, in 12.0.5 Canary Next this mock helper for mocking useRouter worked fantastic in Typescript

import {  useRouter } from 'next/router';
import type { NextRouter } from 'next/router';

jest.mock('next/router');
const mockUseNextRouter = useRouter as jest.MockedFunction<typeof useRouter>;

export function createMockRouter(overrides: Partial<NextRouter>) {
  return {
    basePath: '',
    pathname: '/',
    route: '/',
    query: {},
    asPath: '/',
    back: jest.fn(),
    beforePopState: jest.fn(),
    prefetch: jest.fn(),
    push: jest.fn(),
    reload: jest.fn(),
    replace: jest.fn(),
    events: {
      on: jest.fn(),
      off: jest.fn(),
      emit: jest.fn(),
    },
    isFallback: false,
    isLocaleDomain: false,
    isReady: true,
    defaultLocale: 'en',
    isPreview: false,
    ...overrides,
  };
}

/**
 * Mock the `useRouter()` hook and return the mocked router instance.
 */
export default function mockNextRouter(overrides: Partial<NextRouter> = {}) {
  const mockRouter = createMockRouter(overrides);
  mockUseNextRouter.mockReturnValue(mockRouter);
  return mockRouter;
}

Unfortunately upgrading to next 12.2.5 it started breaking as shown in the screen shot when running one of our consuming tests that has been using this mocked router.

Starting to try out various methods shown above, and hoping for this mock to return the same to our tests its been supporting where we call it like mockNextRouter({ query: { jobPostId: 'job_1' } }); in a given test which lets us expect certain returns from the router. Any suggestions, much loved!

[Lazercat]

UPDATE: this works! :). refactoring to use spyOn instead of jest.mock is the root of this answer, here's a nice reusable mock that you can call per test overrides to with typescript

import type { NextRouter } from 'next/router';

const useRouter = jest.spyOn(require('next/router'), 'useRouter');

const mockUseNextRouter = useRouter;

export function createMockRouter(overrides: Partial<NextRouter>) {
  return {
    basePath: '',
    pathname: '/',
    route: '/',
    query: {},
    asPath: '/',
    back: jest.fn(),
    beforePopState: jest.fn(),
    prefetch: jest.fn(),
    push: jest.fn(),
    reload: jest.fn(),
    replace: jest.fn(),
    events: {
      on: jest.fn(),
      off: jest.fn(),
      emit: jest.fn(),
    },
    isFallback: false,
    isLocaleDomain: false,
    isReady: true,
    defaultLocale: 'en',
    isPreview: false,
    ...overrides,
  };
}

/**
 * Mock the `useRouter()` hook and return the mocked router instance.
 */
export default function mockNextRouter(overrides: Partial<NextRouter> = {}) {
  const mockRouter = createMockRouter(overrides);
  mockUseNextRouter.mockReturnValue(mockRouter);
  return mockRouter;
}

then in your tests one of the following:

// someTestFile.test.tsx
import mockNextRouter from 'your-path-to-mockNextRouter.ts

// Do this 
beforeEach(() => {
  // mock with specific overrides.. 
  mockNextRouter({ pathname: '/jobs', asPath: '/jobs' });
})


// OR do something more specific like this in the test.. 
test('something specific with router', async () => {
    const user = userEvent.setup(); 
    const mockRouter = mockNextRouter({
      pathname: '/test',
      query: {
        name: 'Jesse',
        age: '42',
      },
    });
    
    const { getByTestId } = render(<NextComponent />);
    
    const myButton = getByTestId('myButton');
    
    user.click(myButton); 
    
    await waitFor(() => {
       expect(mockRouter.push).toHaveBeenLastCalledWith({ pathname: '/path-button-click-goes-to' });
    });
})


// other asserts worth peeking at: 
expect(mockRouter.push.mock.calls).toEqual([['/jobs'], ['/path-button-click-went-to']]);

// or for very detailed... 
expect(mockRouter.push).toHaveBeenLastCalledWith(
  {
    pathname: '/test',
    query: {
      name: 'Bob',
    },
  },
  undefined,
  { shallow: true }
);

[renatoholanda]

It works for me! 🙏 🥳

[KushibikiMashu]

Storybook cannot show a component importing next/navigation.

I followed the way next-router-mock instructs, but it didn't work.

Is there any workaround?

// BackButton.tsx
'use client'

import { ChevronLeftIcon } from '@heroicons/react/outline/esm'
import { usePathname, useRouter } from 'next/navigation'
import { useEffect } from 'react'

import { Button } from '@/components'
import { event } from '@/lib'

const BackButton: React.VFC = () => {
  const router = useRouter()
  const toPosts = () => router.push('/posts')
  const pathname = usePathname() ?? ''

  useEffect(() => {
    router.prefetch('/posts')
  }, [router])

  return (
    <Button
      onClick={() => {
        event({
          action: 'click',
          category: 'back_to_post_list',
          label: { path: pathname },
        })
        toPosts()
      }}
      leftIcon={<ChevronLeftIcon className="mr-2 h-4 w-4" />}
    >
      Go back
    </Button>
  )
}

export default BackButton

An error on Storybook

invariant expected app router to be mounted
Error: invariant expected app router to be mounted
    at useRouter (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:57849:15)
    at BackButton (http://localhost:6006/main.3d4623934deb0a025277.hot-update.js:34:74)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:94069:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:97833:13)
    at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:99346:16)
    at beginWork$1 (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:105185:14)
    at performUnitOfWork (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:104316:12)
    at workLoopSync (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:104225:5)
    at renderRootSync (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:104193:7)
    at recoverFromConcurrentError (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_preview_js-generated-config-entry_js-node_modules_s-503687.iframe.bundle.js:103609:20)

[liranelisha]

why is the

jest.mock('next/router')

that's supposed to create auto mock for the module functions doesn't work?
i keep getting this error No router instance found. You should only use "next/router" on the client side of your app.
while using the

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

worked just fine

[sneko]

I solved this a few weeks ago with "@storybook/nextjs"... but today for no reason it came back.

So I reverted a lot of commits to see where it broke, cleared my browser cache, removed node_modules, it was still buggy... Then I came back in the reserve order, and it's now good. It has absolutely no sense... (even if in IT everything can be explain)

So if you encounter this after fixing it. Just pray, and have patience :)

[sneko]

Happened to me once again. Didn't took time to investigate since random the last time. But I just upgraded all Storybook packages (including @storybook/nextjs) from 7.0.0-beta.19 to 7.0.0-beta.41 and it worked directly again.

Maybe due to something else but give a try ;)

[anna-llorens]

This is working for me.

Component

export const Foo: FC = () => {
  const pathName = useRouter().pathname;
  retrun <div>Hello</div>;

UT

// imports

jest.mock("next/router", () => ({
  useRouter: () => {
    return { pathname: "/Foo" };
  },
}));

describe("Foo component Tests", () => {...});

[ApplePieGiraffe]

Can anyone explain why this works

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

but this doesn't?

import * as nextRouter from 'next/router';
jest.spyOn(nextRouter, 'useRouter').mockReturnValue({ push: jest.fn() });

I always get null for the router in the second example. First example works fine, just wondering why that is

[anna-llorens]

Can you add this inside the describe?

jest.spyOn(nextRouter, 'useRouter').mockReturnValue({ push: jest.fn() });

[ApplePieGiraffe]

Sorry not sure what you mean by inside a div... those examples are within my test file

[thepuzzlemaster]

Where in your test file are you putting the spy/mock? And can you post the code from your component file which uses useRouter?

Both the mock and spy work fine for me.
Also, equally confused by the suggestion to put that code inside a div.

[ApplePieGiraffe]

The spy is top level in my test file, just beneath the imports

Here's a simple component for which the spy doesn't seem to work for me

import React from 'react';
import { useRouter } from 'next/router';

const Button = () => {
  const router = useRouter();

  return <button onClick={() => router.push('/')}>Click me</button>;
};

export default Button;

[thepuzzlemaster]

Can you create a minimal repro with it not working?
Here's a small repro with it working okay as far as I can tell - based on your example above.
https://github.com/thepuzzlemaster/playwright-defect-repro/tree/useRouter-mock

[Kukunin]

As a different solution, we can avoid mocking the router in multiple environments (Jest, Cypress, Storybook) just by handling the error itself. in my case, I use router in a single place, and it works by doing:

const useSafeRouter = () => {
  try {
    return useRouter()
  } catch (error) {
    return {
      push: () => {},
    }
  }
}

// in a component
const router = useSafeRouter() // instead  of useRouter()

This way the component is more versatile and it requires no mocking

[david-morris]

So this symbol just got moved (13.5 update) from next/dist/shared/lib/router-context to next/dist/shared/lib/router-context.shared-runtime. Maybe this should be part of a normal export instead of looking through dist/? Unless this is a way of saying "don't tightly bind things that you need to unit test, that's dumb," which is also true.

ETA: See @hoffination 's comment. If you're using Storybook, you shouldn't need to stub the next router yourself; Storybook will do it for you and you can use their API to add mocks, set the route, etc.

[mkelley33]

@david-morris thank you! In my case, I'm using the app router, but haven't found a way to mock it just yet. If anyone has any insight regarding this, please mention me when you add to the discussion.

[soda3x]

@david-morris thank you! In my case, I'm using the app router, but haven't found a way to mock it just yet. If anyone has any insight regarding this, please mention me when you add to the discussion.

I found that the only way I could successfully mock the app router was to make a singleton wrapper class and mock a getter.

Then I used jest-mock-extended to mock the AppRouterInstance with a deep mock.

    const mockAppInstance: DeepMockProxy<AppRouterInstance> = mockDeep<AppRouterInstance>();

    beforeEach(() => {
        jest.spyOn(NextRouterWrapper, "getAppRouter").mockReturnValue(mockAppInstance);
    });

/**
 * Singleton class wrapping the Next Router
 */
export class NextRouterWrapper {
    private static instance: NextRouterWrapper;
    private appRouterInstance: AppRouterInstance;

    private constructor() {
        this.appRouterInstance = useRouter();
    }

    /**
     *
     * @returns Next App Router Instance
     */
    public static getAppRouter(): AppRouterInstance {
        if (!NextRouterWrapper.instance) {
            NextRouterWrapper.instance = new this();
        }
        return NextRouterWrapper.instance.appRouterInstance;
    }
}

[mkelley33]

@soda3x thank you very much! I will give this a try and see if it solves my problem! The solution seems elegant indeed. How were you able to call the useRouter hook inside a class? I'm getting a linting error suggesting that I can't do that. Do you by chance have an example of how you might use it in a test? I keep getting "invariant expected app router to be mounted" in my test.

import { render, screen } from '@testing-library/react';
import ContactForm from './page';
import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
import { NextRouterWrapper } from '@/NextRouterWrapper';
describe('Contact form renders', () => {
  const mockAppInstance: DeepMockProxy<AppRouterInstance> =
    mockDeep<AppRouterInstance>();

  beforeEach(() => {
    jest
      .spyOn(NextRouterWrapper, 'getAppRouter')
      .mockReturnValue(mockAppInstance);
  });
  it('Renders the form fields', () => {
    render(<ContactForm />);
    expect(
      screen.getByRole('heading', { name: /contact/i })
    ).toBeInTheDocument();
    expect(screen.getByLabelText(/First Name/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Last Name/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Email/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Message/i)).toBeInTheDocument();
  });
});

[soda3x]

@mkelley33 That looks good, if you're still getting the invariant expected app router to be mounted it could be the stubborn thing not mocking properly which is what I had happening with mine. To fix this I wrapped the App Router in a singleton class.

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

/**
 * Singleton class wrapping the Next Router
 */
export class NextRouterWrapper {
    private static instance: NextRouterWrapper;
    private appRouterInstance: AppRouterInstance;

    private constructor() {
        this.appRouterInstance = useRouter();
    }

    /**
     *
     * @returns Next App Router Instance
     */
    public static getAppRouter(): AppRouterInstance {
        if (!NextRouterWrapper.instance) {
            NextRouterWrapper.instance = new this();
        }
        return NextRouterWrapper.instance.appRouterInstance;
    }
}

then in the test I mocked the getter:

jest.spyOn(NextRouterWrapper, "getAppRouter").mockReturnValue(mockAppInstance);

In production code I then just called getAppRouter() when I used the Router rather than using the App Router directly.

[hoffination]

@david-morris For us Storybook already stubs the Next router on the version we're on. So no need to go digging in dist to get things working. Still, was a bit of a challenge to migrate tests and Storybook to this version because of this change.

[pedroSoaresll]

This implementation helps me to make test assertions on route pathname:

describe("<Auth /> page", () => {
  test("should redirect to register page", async () => {
    const router: Partial<NextRouter> = {
      push: jest.fn(),
      prefetch: jest.fn(),
    };
    render(
      <RouterContext.Provider value={router as NextRouter}>
        <Auth />
      </RouterContext.Provider>
    );
    await user.click(screen.getByRole("link", { name: "Register" }));
    expect(router.push).toHaveBeenCalledWith(
      "/auth/register",
      expect.objectContaining({})
    );
  });
});