feat: Nextjs support plugin (#422)

- closes #155 

Co-authored-by: Gleb Bahmutov <gleb.bahmutov@gmail.com>

Author: dmtrKovalenko

.gitignore

@@ -8,3 +8,4 @@ package-lock.json
 .nyc_output
 coverage
 *.generated.css
+.next

circle.yml

@@ -85,6 +85,26 @@ workflows:
                   npm run only-covered
                 working_directory: examples/react-scripts
 
+      - cypress/run:
+          name: Example Next.js
+          requires:
+            - Install
+          executor: cypress/base-12
+          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
+          install-command: npm install
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/nextjs
+          command: npm test
+          store_artifacts: true
+          post-steps:
+            - run:
+                name: Check coverage 📈
+                command: |
+                  npm run check-coverage
+                  npm run only-covered
+                working_directory: examples/nextjs
+
       - cypress/run:
           # react-scripts example with component tests not in "src" folder
           # but in "cypress/component" folder

cypress/component/advanced/framer-motion/Motion.spec.tsx

@@ -10,7 +10,8 @@ describe('framer-motion', () => {
     cy.get("[data-testid='motion']").should('have.css', 'border-radius', '20%')
   })
 
-  it('Mocks setTimeout and requestAnimationFrame', () => {
+  // looks like cy.tick issue. Refer to the https://github.com/bahmutov/cypress-react-unit-test/issues/420
+  it.skip('Mocks setTimeout and requestAnimationFrame', () => {
     cy.clock()
     mount(<Motion />)
 

examples/nextjs/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/nextjs/README.md

@@ -0,0 +1,54 @@
+# example: Next.js
+
+> A typical project using [next.js](https://nextjs.org/)
+
+## Configuration
+
+In order to reuse next's webpack configuration and all the custom configuration defined in `next.config.js` connect special plugin in [plugin file](./cypress/plugins/index.js)
+
+```js
+const preprocessor = require('cypress-react-unit-test/plugins/next')
+
+module.exports = (on, config) => {
+  preprocessor(on, config)
+
+  return config
+}
+```
+
+## Usage
+
+1. Run `npm install` in this folder to install dependencies.
+
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+## Server side props
+
+⚠️⚠️ **Important:** ⚠️⚠️ Please do not test the page components using component testing. These components have too much responsibility and need to be tested as a part of your application flow. Consider using cypress `integration` tests.
+
+But if you still want to test the page component, make sure that it will be mounted as any other pure `React` component. It means that next's specific functions like `getInitialProps` or `getStaticProps` **won't be called**.
+
+But still you can call them manually:
+
+```js
+IndexPage.getInitialProps().then(props => {
+  mount(<IndexPage {...props} />)
+})
+
+cy.contains(
+  '`.getInitialProps()` was called and passed props to this component',
+)
+```
+
+Find more examples in [Page.spec.jsx](./cypress/components/Page.spec.jsx).

examples/nextjs/components/HelloWorld.mdx

@@ -0,0 +1,8 @@
+# Hello, *world*!
+
+Below is an example of JSX embedded in Markdown. <br /> **Try and change
+the background color!**
+
+<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
+  <h3>This is JSX</h3>
+</div>

examples/nextjs/components/Search.jsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+export function Search() {
+  const [value, setValue] = React.useState('')
+  return (
+    <div>
+      <input
+        aria-label="search"
+        value={value}
+        onChange={e => setValue(e.currentTarget.value)}
+      />
+
+      <p className="search-text">You are searching for: {value}</p>
+
+      <style jsx>{`
+        input {
+          border-radius: 20px;
+        }
+        div {
+          padding: 16px;
+          background: tomato;
+        }
+      `}</style>
+    </div>
+  )
+}

examples/nextjs/cypress.json

@@ -0,0 +1,8 @@
+{
+  "testFiles": "**/*.spec.{js,jsx}",
+  "viewportWidth": 500,
+  "viewportHeight": 800,
+  "experimentalComponentTesting": true,
+  "experimentalFetchPolyfill": true,
+  "componentFolder": "cypress/components"
+}

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

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+import * as React from 'react'
+import IndexPage from '../../pages/index'
+import { mount } from 'cypress-react-unit-test'
+
+describe('NextJS page', () => {
+  it('Renders page component', () => {
+    mount(<IndexPage />)
+
+    cy.contains('Welcome to Next.js')
+  })
+
+  it("It doesn't run the `.getInitialProps()`", () => {
+    mount(<IndexPage />)
+
+    cy.get('[data-testid="server-result"').should(
+      'not.contain',
+      '`.getInitialProps()` was called and passed props to this component',
+    )
+  })
+
+  it('Allows to manually mock the server side props', () => {
+    mount(<IndexPage asyncProp />)
+
+    cy.contains(
+      '`.getInitialProps()` was called and passed props to this component',
+    )
+  })
+
+  it('can be tested with real .getInitialProps call', () => {
+    IndexPage.getInitialProps().then(props => {
+      mount(<IndexPage {...props} />)
+    })
+
+    cy.contains(
+      '`.getInitialProps()` was called and passed props to this component',
+    )
+  })
+})

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

@@ -0,0 +1,23 @@
+/// <reference types="cypress" />
+import * as React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import { Search } from '../../components/Search'
+import HelloWorld from '../../components/HelloWorld.mdx'
+
+describe('<Search /> NextJS component', () => {
+  it('Renders component', () => {
+    mount(<Search />)
+
+    cy.get('input').type('124152')
+    cy.contains('.search-text', '124152').should('be.visible')
+  })
+
+  it('Renders mdx component using  custom next.config.js', () => {
+    mount(<HelloWorld />)
+
+    cy.contains('Hello').should('have.css', 'fontWeight', '700')
+    cy.contains('This is JSX')
+      .parent()
+      .should('have.css', 'background-color', 'rgb(255, 99, 71)')
+  })
+})