CODEWITHSUNDEEP
jestjsnext.jsreact-testing-library
Fer Toasted
Fer Toasted

Reputation: 1738

Jest+NextJs: You should only use "next/router" on the client side of your app

I'm mocking the next/router dependency in my Jest+React-testing-libray tests as I always have:

import * as nextRouter from 'next/router';

export const routerData = {
  pathname: '/users/create',
  route: '/users/create',
  query: { },
  asPath: '/users/create',
  isFallback: false,
  basePath: '',
  isReady: true,
  isPreview: false,
  isLocaleDomain: false,
  events: {},
};

// mock router
jest.mock('next/router');
nextRouter.useRouter.mockImplementation(() => (routerData));

describe('a component that requires next/router, () => ... );

This had been working correctly but after updating to NextJs 12.2.0 I get this warning:

No router instance found. You should only use "next/router" on the client side of your app.

This warning makes all my tests with the mocked router to fail.

Ideas to fix this?

Upvotes: 2

Views: 2459

Answers (1)

Fer Toasted
Fer Toasted

Reputation: 1738

Well, it appears that this is not related to 12.2.0. Somehow my last version of Next - 12.0.0 - wasn't thrownig this error but other older versions did.

Thanks to bistacos for the response here.

const useRouter = jest.spyOn(require('next/router'), 'useRouter');
useRouter.mockImplementation(() => ({
  pathname: '/',
  ...moreRouterData
}));

Upvotes: 2

Related Questions