[TESTS] it gives an error because there is no next/router mock in every new test creation

[mertcanaltin]

useRouter() in a new test; I realized they need a mock

step one : added new test

 yarn test 

result :

FAIL src/modules/Dashboard/components/DomainTable/index.spec.tsx error:

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

  47 | const DomainTable: FC<DomainTableProps> = (props) => {
  48 |   const [showDomainModal, setShowDomainModal] = useState(false);
> 49 |   const router = useRouter();
     |                           ^
  50 |   const { t } = useTranslation("dashboard");
  51 |   const { domains, isLoading } = useDomains();
  52 |

  at useRouter (node_modules/next/client/router.ts:135:11)
  at DomainTable (src/modules/Dashboard/components/DomainTable/index.tsx:49:27)
  at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
  at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13)
  at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16)
  at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
  at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
  at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
  at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20)
  at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22)
  at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
  at act (node_modules/react/cjs/react.development.js:2582:11)
  at node_modules/@testing-library/react/dist/act-compat.js:63:25
  at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26)
  at render (node_modules/@testing-library/react/dist/pure.js:246:10)
  at Object.<anonymous> (src/modules/Dashboard/index.spec.tsx:6:11)

FAIL src/modules/Dashboard/components/DomainTable/index.spec.tsx

solved: I do this in jest.setup.js instead of executing it in every test and now I can start new tests without errors

jest.setup.js :

 import "@testing-library/jest-dom/extend-expect";

// next/router mock
jest.mock('next/router', () => ({
  __esModule: true,
  useRouter: jest.fn().mockReturnValue({
    pathname: '/',
    route: '/',
    query: {},
    asPath: '/',
    components: {},
    isFallback: false,
    basePath: '',
    locale: 'en',
    locales: ['en', 'tr'],
    defaultLocale: 'en',
    isReady: true,
    isPreview: false,
    isLocaleDomain: false,
    events: {},
    push: jest.fn(),
    replace: jest.fn(),
    reload: jest.fn(),
    back: jest.fn(),
    prefetch: jest.fn(),
    beforePopState: jest.fn(),
    isLocaleDomainInternal: jest.fn(),
    isSsr: true,
    isReadyInternal: true,
  }),
}));

[mertcanaltin]

Hello, the reason I did this was to prevent the repetition of test code. However, now I'm starting to think if it would be reliable to run this code (jest.setup.js) in component tests that don't use useRouter(). I need some opinions on this matter fyi @kayraberktuncer @baspinarenes

[k61b]

If it's a package used in certain places, it can be both code complexity and unreliable to run for each test.

[mertcanaltin]

If it's a package used in certain places, it can be both code complexity and unreliable to run for each test.

Yes, usually when we create a test and add the component to the test, if the component is using useRouter then useRouter needs to be specified as Mock

For this, it seems that it would be healthier to create the test as Mock in the relevant test file, not in the jest.setup file

[k61b]

Yes you are right. 💯

[mertcanaltin]

i will investigate this https://jestjs.io/docs/manual-mocks :dango: