Add next.js router example (#456)

* Add next.js router example

* Update tests

* Add new covered file to the check-coverage script

* Add pages/router.js to only-covered script

* fix name

Co-authored-by: Gleb Bahmutov <[email protected]>

Author: dmtrKovalenko

examples/nextjs/README.md

@@ -55,6 +55,45 @@ cy.contains(
 
 Find more examples in [Page.spec.jsx](./cypress/components/Page.spec.jsx).
 
+## Router mocking
+
+If your components depends on the next.js router (using `useRouter` or `withRouter`) **we recommend to cover this component with integration tests**, because this component is likely not reusable and depends on application flow. But if you still need to write component test for it you will likely meet the problem like `cannot read property 'pathname' of undefined`.
+
+It happens because we render the component just like any other react component – without any specific next.js features. In order to make router work it is required to provide specific context that would be picked up by `useRouter`:
+
+```js
+import { mount } from 'cypress-react-unit-test'
+import { RouterContext } from 'next/dist/next-server/lib/router-context'
+
+// Create a router value you need for the components. Here are all available values as for next v9.5
+// P.S. using cy.spy() here is not required, it is possible to pass simple () => {} function
+const router = {
+  pathname: '/testPath',
+  route: '/testPath',
+  query: {},
+  asPath: '/testPath',
+  components: {},
+  isFallback: false,
+  basePath: '',
+  events: { emit: cy.spy(), off: cy.spy(), on: cy.spy() },
+  push: cy.spy(),
+  replace: cy.spy(),
+  reload: cy.spy(),
+  back: cy.spy(),
+  prefetch: cy.spy(),
+  beforePopState: cy.spy(),
+}
+
+// And wrap your component with special provider
+mount(
+  <RouterContext.Provider value={router}>
+    <YourComponent />
+  </RouterContext.Provider>,
+)
+```
+
+Find more examples in [Router.spec.jsx](./cypress/components/Router.spec.jsx)
+
 ## Mocking imports
 
 Mocking imports is not working yet, seems the plugin we are inserting for loose mode causes problems, see issue [439](https://github.com/bahmutov/cypress-react-unit-test/issues/439).

examples/nextjs/cypress/components/Router.spec.jsx

@@ -0,0 +1,95 @@
+// @ts-check
+/// <reference types="cypress" />
+import * as React from 'react'
+import RouterPage from '../../pages/router'
+import { createRouter } from 'next/router'
+import { RouterContext } from 'next/dist/next-server/lib/router-context'
+import { mount } from 'cypress-react-unit-test'
+
+describe('Component with router usage', () => {
+  it('renders the component that uses next.js router context', () => {
+    const router = {
+      pathname: '/testPath',
+      route: '/testPath',
+      query: {},
+      asPath: '/testPath',
+      components: {},
+      isFallback: false,
+      basePath: '',
+      events: { emit: cy.spy(), off: cy.spy(), on: cy.spy() },
+      push: cy.spy(),
+      replace: cy.spy(),
+      reload: cy.spy(),
+      back: cy.spy(),
+      prefetch: cy.spy(),
+      beforePopState: cy.spy(),
+    }
+
+    mount(
+      <RouterContext.Provider value={router}>
+        <RouterPage />
+      </RouterContext.Provider>,
+    )
+
+    cy.contains('Next.js route /testPath')
+  })
+
+  it('renders the component that uses next.js with parsed query', () => {
+    // alternatively you can use next's internal `createRouter` function to create a real instance of NextRouter
+    const router = createRouter(
+      '/testPath',
+      { param1: 'param1' },
+      '/asTestPath',
+      {
+        subscription: cy.spy(),
+        initialProps: {},
+        App: cy.spy(),
+        Component: cy.spy(),
+        pageLoader: cy.spy(),
+        initialStyleSheets: [],
+        wrapApp: cy.spy(),
+        isFallback: false,
+      },
+    )
+
+    mount(
+      <RouterContext.Provider value={router}>
+        <RouterPage />
+      </RouterContext.Provider>,
+    )
+
+    cy.contains('My query: {"param1":"param1"}')
+  })
+
+  it('pushes the new route', () => {
+    const router = {
+      pathname: '/router',
+      route: '/router',
+      query: {},
+      asPath: '/router',
+      components: {},
+      isFallback: false,
+      basePath: '',
+      events: { emit: cy.spy(), off: cy.spy(), on: cy.spy() },
+      push: cy.spy(),
+      replace: cy.spy(),
+      reload: cy.spy(),
+      back: cy.spy(),
+      prefetch: cy.spy(),
+      beforePopState: cy.spy(),
+    }
+
+    mount(
+      <RouterContext.Provider value={router}>
+        <RouterPage />
+      </RouterContext.Provider>,
+    )
+
+    cy.get('button')
+      .click()
+      .then(() => {
+        // Make sure that `.then` here is required to make an assertion after component mount and retrying button
+        expect(router.push).to.be.called
+      })
+  })
+})

examples/nextjs/package.json

@@ -7,11 +7,11 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "test": "../../node_modules/.bin/../../node_modules/.bin/cypress-expect run --min-passing 7",
+    "test": "../../node_modules/.bin/../../node_modules/.bin/cypress-expect run --min-passing 10",
     "cy:open": "../../node_modules/.bin/cypress open",
     "build:static": "next build && next out",
-    "check-coverage": "../../node_modules/.bin/check-coverage components/Search.jsx && ../../node_modules/.bin/check-coverage pages/index.js",
-    "only-covered": "../../node_modules/.bin/only-covered components/Search.jsx pages/index.js"
+    "check-coverage": "../../node_modules/.bin/check-coverage components/Search.jsx && ../../node_modules/.bin/check-coverage pages/index.js && ../../node_modules/.bin/check-coverage pages/router.js",
+    "only-covered": "../../node_modules/.bin/only-covered components/Search.jsx pages/index.js pages/router.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

examples/nextjs/pages/router.js

@@ -0,0 +1,20 @@
+// @ts-check
+import { useRouter } from 'next/router'
+
+function RouterPage(props) {
+  const router = useRouter()
+  console.log(router.push)
+  return (
+    <main>
+      <h1> Next.js route </h1>
+      {router.pathname}
+      <br />
+      As path: {router.asPath}
+      <br />
+      My query: {JSON.stringify(router.query)}
+      <button onClick={() => router.push('/')}>push</button>
+    </main>
+  )
+}
+
+export default RouterPage