How to mock useRouter from next/router in Cypress component testing?

[maxpopovitch]

Hey community,
I use Cypress for components testing in my project.

Here is the code snippet from my component:

...
import { useRouter } from 'next/router';
...

const AccountDetails: VFC = () => {
  const router = useRouter();
  const { accountUUID } = router.query;
  ...
  return <div deta-testid="cool" />;
};

export default AccountDetails;

and this is how I want to test it:

it('should show loader if there is no data', () => {
    mount(<AccountDetails />).then(() => {
      cy.get('[data-testid="cool"]').should('be.visible');
    });
  });

For now, I've got this error:

TypeError: The following error originated from your test code, not from Cypress.

  > Cannot read properties of null (reading 'query')

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

How can I mock useRouter, or perhaps you can suggest another way to manage this test to be successfully running?
Thanks a lot in advance!

[Marko-Tesla]

import { RouterContext } from 'next/dist/shared/lib/router-context'
import { Provider } from 'mobx-react'

const createRouter = () => {
  return {
    pathname: '/',
    route: '/',
    query: {},
    asPath: '/',
    components: {},
    isFallback: false,
    basePath: '',
    events: { emit: cy.spy().as('emit'), off: cy.spy().as('off'), on: cy.spy().as('on') },
    push: cy.spy().as('push'),
    replace: cy.spy().as('replace'),
    reload: cy.spy().as('reload'),
    back: cy.spy().as('back'),
    prefetch: cy.stub().as('prefetch').resolves(),
    beforePopState: cy.spy().as('beforePopState'),
  }
}

describe('<CategoryPageList>', () => {
  it('Product card click redirects to PDP', () => {
    const router = createRouter()
    cy.mount(
        <RouterContext.Provider value={router}>
          <CategoryPageList
            paginationList={paginationList}
            sortFields={sortFields}
            products={productListStore}
          />
        </RouterContext.Provider>,
    )
    cy.contains('Samsung Galaxy A32 128GB Black')
      .click()
      .then(() => {
        expect(router.push).to.be.calledWith(
          '/p/smartfon-samsung-galaxy-a32-128gb-black-236634',
        )
      })
  })
}

Got rid of this error this way. Next 12. Router won't work as expected(pushes won't work, but you can test what was pushed to router).

[knightjdr]

Updated for Next 13.5.6 and Cypress 13.3.1.

I created a utility function in cypress/utils/router.tsx

import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
import { NextRouter } from 'next/router';

const createRouter = (params: Partial<NextRouter>) => ({
  route: '/',
  pathname: '/',
  query: {},
  asPath: '/',
  basePath: '',
  defaultLocale: 'en',
  domainLocales: [],
  isLocaleDomain: false,
  push: cy.spy().as('push'),
  replace: cy.spy().as('replace'),
  reload: cy.spy().as('reload'),
  back: cy.spy().as('back'),
  forward: cy.spy().as('forward'),
  prefetch: cy.stub().as('prefetch').resolves(),
  beforePopState: cy.spy().as('beforePopState'),
  events: {
    emit: cy.spy().as('emit'),
    off: cy.spy().as('off'),
    on: cy.spy().as('on'),
  },
  isFallback: false,
  isReady: true,
  isPreview: false,
  ...params,
});

interface MockRouterProps extends Partial<NextRouter> {
  children: React.ReactNode;
}

const MockRouter = ({
  children,
  ...props
}: MockRouterProps) => {
  const router = createRouter(props);

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

export default MockRouter;

In any test where I want to mock the router, I simply import MockRouter and supply whatever props I want to change from the defaults:

cy.mount(
   <MockRouter asPath="/path/to/route#hash">
      <ComponentUnderTest />
   </MockRouter>
);

[robinwalterfit]

For Next 13.1.1 there is a missing property forward:

const createRouter = (params: Partial<NextRouter>) => ({
  route: '/',
  pathname: '/',
  query: {},
  asPath: '/',
  basePath: '',
  back: cy.spy().as('back'),
  beforePopState: cy.spy().as('beforePopState'),
  forward: cy.spy().as('forward'), // <---------- added `forward`
  prefetch: cy.stub().as('prefetch').resolves(),
  push: cy.spy().as('push'),
  reload: cy.spy().as('reload'),
  replace: cy.spy().as('replace'),
  events: {
    emit: cy.spy().as('emit'),
    off: cy.spy().as('off'),
    on: cy.spy().as('on'),
  },
  isFallback: false,
  isLocaleDomain: false,
  isReady: true,
  defaultLocale: 'en',
  domainLocales: [],
  isPreview: false,
  ...params,
});

[ElGrecode]

Not sure what version of Next changed this, but on 13.2.4 RouterContext has change to AppRouterContext

import {
    AppRouterContext,
    AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context'

const createRouter = (params: Partial<AppRouterInstance>) => ({
    back: cy.spy().as('back'),
    forward: cy.spy().as('forward'),
    prefetch: cy.stub().as('prefetch').resolves(),
    push: cy.spy().as('push'),
    replace: cy.spy().as('replace'),
    refresh: cy.spy().as('refresh'),
    ...params,
})

interface MockNextRouterProps extends Partial<AppRouterInstance> {
    children: React.ReactNode
}

const MockNextRouter = ({ children, ...props }: MockNextRouterProps) => {
    const router = createRouter(props as AppRouterInstance)

    return (
        <AppRouterContext.Provider value={router}>
            {children}
        </AppRouterContext.Provider>
    )
}

export default MockNextRouter

[franjmr]

Not sure what version of Next changed this, but on 13.2.4 RouterContext has change to AppRouterContext

import {
    AppRouterContext,
    AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context'

const createRouter = (params: Partial<AppRouterInstance>) => ({
    back: cy.spy().as('back'),
    forward: cy.spy().as('forward'),
    prefetch: cy.stub().as('prefetch').resolves(),
    push: cy.spy().as('push'),
    replace: cy.spy().as('replace'),
    refresh: cy.spy().as('refresh'),
    ...params,
})

interface MockNextRouterProps extends Partial<AppRouterInstance> {
    children: React.ReactNode
}

const MockNextRouter = ({ children, ...props }: MockNextRouterProps) => {
    const router = createRouter(props as AppRouterInstance)

    return (
        <AppRouterContext.Provider value={router}>
            {children}
        </AppRouterContext.Provider>
    )
}

export default MockNextRouter

Thanks! it's very useful!

[email protected]
[email protected]
[email protected]

[Roalkege]

Has the AppRouterContext been changed again in version 13.4.1?
Cannot find namespace 'AppRouterContext'.

And the return type of MockNextRouter is boolean.

[email protected]
[email protected]
[email protected]

[dcayers]

The latest import is

import {
    AppRouterContext,
    AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context.shared-runtime'

[McKayMower]

Works for me May 2024!! Thanks

[email protected]
[email protected]
[email protected]

[blessanm86]

Is there something similar to memoryrouter for next?

[srequiem]

I'm using nextJs and i got some problem too,

Still the

Here is my /cypress/utils/router.js

import {
  AppRouterContext,
} from 'next/dist/shared/lib/app-router-context'

const createRouter = (params) => ({
  route: '/',
  pathname: '/',
  query: {},
  asPath: '/',
  basePath: '',
  back: cy.spy().as('back'),
  beforePopState: cy.spy().as('beforePopState'),
  forward: cy.spy().as('forward'),
  prefetch: cy.stub().as('prefetch').resolves(),
  push: cy.spy().as('push'),
  reload: cy.spy().as('reload'),
  replace: cy.spy().as('replace'),
  events: {
    emit: cy.spy().as('emit'),
    off: cy.spy().as('off'),
    on: cy.spy().as('on'),
  },
  isFallback: false,
  isLocaleDomain: false,
  isReady: true,
  defaultLocale: 'fr',
  domainLocales: [],
  isPreview: false,
  ...params,
});

const MockRouter = ({
  children,
  ...props
}) => {
  const router = createRouter(props);

  return (
    <AppRouterContext.Provider value={router}>
      {children}
    </AppRouterContext.Provider>
  );
};

export default MockRouter;

and i use it this way in my component.cy.js

import React from 'react';

import Mycomponent from 'components/alerts/alert-join-orga';
import MockRouter from '../../../cypress/utils/router.js'

describe('<AlertJoinOrga />', () => {
  it('renders successfully without success query param', () => {
    cy.mount(
      <MockRouter asPath="/[organization]/[project]">
        <Mycomponent />
      </MockRouter>
    );
    cy.get('.k-Alert').should('not.exist');
  });

  it('renders success alert with organization name when success query param is present', () => {
    cy.mount(
      <MockRouter asPath="/[organization]/[project]">
        <Mycomponent />
      </MockRouter>
      , {
        router: {
          asPath: '/[organization]/[project]?join-organization=success',
        },
      });

    cy.get('.k-Alert').should('exist');

    cy.contains("Bravo, vous avez rejoint l'équipe");
  });
});

My cypress.config.js file just in case

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  defaultCommandTimeout: 10000,

  e2e: {
    baseUrl: "http://localhost:3100",
  },
  component: {
    devServer: {
      framework: "next",
      bundler: "webpack",
    },
  },
});

Maybe some of you got a clue on what's happening ? First time using cypress hahah

[blessanm86]

I use this package https://www.npmjs.com/package/next-router-mock

Use it as

import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider/next-12';


Cypress.Commands.add('mount', (children, options = {}) => {
  const {
    routerProps = { url: '/' },
    ...mountOptions
  } = options;

  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        staleTime: Infinity,
      },
    },
  });

  const wrapped = (
      <QueryClientProvider client={queryClient}>
        <LocaleContextProvider locale={'en-GB'}>
          <Suspense fallback="Rendering the component...">
            <MemoryRouterProvider {...routerProps}>
              {children}
            </MemoryRouterProvider>
          </Suspense>
        </LocaleContextProvider>
      </QueryClientProvider>
  );

  return mount(wrapped, mountOptions);
});

[srequiem]

Okay i'm gonna try, but i see a lot of others components in your file like QueryClientProvider or LocaleContextProvider

• Supsense in addition.

Do i need all these things ?

[blessanm86]

No those are just specific to react query and i18next that I use. The mounting component will be different for others, just wrap the MemoryRouterProvider around whatever u have