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?

[ijjk]

It might be best to mock the router directly instead of calling createRouter since that API is internal and can change at any time. Here's an example:

import React from 'react'
import { render } from '@testing-library/react'
import { RouterContext } from 'next-server/dist/lib/router-context'

describe('Basic test', () => {
  it('Renders current user value', async () => {
    const router = {
      pathname: '/users/$user',
      route: '/users/$user',
      query: { user: 'nikita' },
      asPath: '/users/nikita',
    }
    const User = require('../pages/users/$user').default
    const tree = render(
      <RouterContext.Provider value={router}>
         <User />
      </RouterContext.Provider>
    )
    expect(tree.getByText('User: nikita')).toBeTruthy()
  })
})

[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: '/' }));

[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: "",
        };
    },
}));

[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.

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 :)

[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().