[Feature] Add feature to allow mocking useRouter in Next.js for component testing

If the component uses useRouter() hook, tests will fail because the hook will be null/undefined.

Jest has jest.spyOn to mock it (reference - https://jamespotz.github.io/blog/how-to-mock-userouter). It would be helpful to have something similar here.

[MindaugasMateika]

Given component

import { useRouter } from 'next/router'

const LanguageSwitch = () => {
  const router = useRouter()
  const { locales, locale: activeLocale } = router
  const otherLocales = locales?.filter(locale => locale !== activeLocale)

  return (
    // component implementation which uses router values
  )
}

export default LanguageSwitch

the test

test('renders language switch', async ({ mount }) => {
  const component = await mount(<LanguageSwitch />)
})

will result in:

    undefined: TypeError: Cannot destructure property 'locales' of 'router$1' as it is null.

---

What I would like to do, is mock what router would return in the test:

test('renders language switch', async ({ mount }) => {
  // mock router locales values for example so it would render component with those values
  const component = await mount(<LanguageSwitch />)
})

With Jest, it seems is possible to mock what the router would return on test by test basis (like in blog example I posted earlier)

[pavelfeldman]

Once the patch above lands, you should be able to do the following:

// index.js
import router from 'next/router';
import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';

beforeMount(async ({ hooksConfig }) => {
  // Before mount, redefine useRouter to return mock value from test.
  router.useRouter = () => hooksConfig.router;
});

// test.spec.jsx
// Pass mock value from test into `beforeMount`.
await mount(<App></App>, {
  hooksConfig: {
    route: {
      query: {page: 1, per_page: 10},
      asPath: '/posts'
    }
  }
});