NextJS plugin issue for Cypress Component Testing (options.rewrites.map is not a function)

[Norfeldt]

I think I need a little help on how to use the cypress plugin for nextJS in order to run Components Test (https://docs.cypress.io/guides/component-testing/introduction#Install)

package.json

  "devDependencies": {
    "@cypress/react": "^5.3.4",
    "@cypress/webpack-dev-server": "^1.1.4",
    "@cypress/webpack-preprocessor": "^5.7.0",
    "@testing-library/cypress": "^7.0.6",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.36",
    "@types/react": "^17.0.3",
    "cypress": "^7.1.0",
    "sass": "^1.32.8",
    "typescript": "^4.2.3",
    "webpack-dev-server": "^3.11.2"
  }

cypress/plugins/index.ts

module.exports = (on, config) => {
  require('@cypress/react/plugins/next')(on, config)

  return config
}

Trying to start the test throws a options.rewrites.map is not a function error

$ yarn cypress open-ct
yarn run v1.22.5
$ /Users/norfeldt/Repos/LoCali/locali-web/node_modules/.bin/cypress open-ct
info  - Loaded env from /Users/norfeldt/Repos/LoCali/locali-web/.env.local
Error [TypeError]: options.rewrites.map is not a function
    at new BuildManifestPlugin (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/next/build/webpack/plugins/build-manifest-plugin.ts:94:38)
    at getBaseWebpackConfig (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/next/build/webpack-config.ts:1133:9)
    at getNextWebpackConfig (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/@cypress/react/plugins/next/findNextWebpackConfig.js:9:29)
    at findNextWebpackConfig (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/@cypress/react/plugins/next/findNextWebpackConfig.js:36:24)
    at Object.handler (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/@cypress/react/plugins/next/index.js:5:27)
TypeError: options.rewrites.map is not a function
    at new BuildManifestPlugin (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/next/build/webpack/plugins/build-manifest-plugin.ts:94:38)
    at getBaseWebpackConfig (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/next/build/webpack-config.ts:1133:9)
    at getNextWebpackConfig (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/@cypress/react/plugins/next/findNextWebpackConfig.js:9:29)
    at findNextWebpackConfig (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/@cypress/react/plugins/next/findNextWebpackConfig.js:36:24)
    at Object.handler (/Users/norfeldt/Repos/LoCali/locali-web/node_modules/@cypress/react/plugins/next/index.js:5:27)

Am I missing something?

[djsilcock]

options.rewrites used to be an array but changed to an object - are you using the latest versions of everything (including next) ?

[Norfeldt]

@djsilcock started the project quite recently..

package.json

{
  "name": "locali-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@stripe/stripe-js": "^1.13.2",
    "class-name": "^0.1.3",
    "lodash": "^4.17.21",
    "next": "10.0.9",
    "next-stripe": "^1.0.0-beta.9",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "stripe": "^8.142.0",
    "swr": "^0.5.5"
  },
  "devDependencies": {
    "@cypress/react": "^5.3.4",
    "@cypress/webpack-dev-server": "^1.1.4",
    "@cypress/webpack-preprocessor": "^5.7.0",
    "@testing-library/cypress": "^7.0.6",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.36",
    "@types/react": "^17.0.3",
    "cypress": "^7.1.0",
    "sass": "^1.32.8",
    "typescript": "^4.2.3",
    "webpack-dev-server": "^3.11.2"
  }
}

[smartsandeep1994]

use next.js 10.2.0

[djsilcock]

Probably needs next>10.1 (error is opposite of #15734 where upgrading nextjs broke component testing)

[Norfeldt]

This did the trick for getting the cypress window opened:

$ yarn upgrade next --latest

$ yarn add -D webpack@4

Thank you very much @djsilcock for helping me so far.

[Norfeldt]

It boots up the cypress window and I can trigger a component test to run. But it keeps failing

cypress/component/DishCard.spec.jsx

import React from 'react'
import { mount } from '@cypress/react'

import DishCard from '../../components/DishCard'

describe('DishCard', () => {
  it('looks great', () => {
    mount(() => <div>Looking great</div>)
    cy.findByTitle('SALMON')
  })

  // it('looks great', () => {
  //   mount(<DishCard id="dish02" />)
  //   cy.findByTitle('SALMON')
  // })
})

Cannot read property 'displayName' of undefined

View stack trace
 Print to console
at getDisplayName (webpack-internal:///./node_modules/@cypress/react/dist/cypress-react.esm-bundler.js:66:22)
at mount (webpack-internal:///./node_modules/@cypress/react/dist/cypress-react.esm-bundler.js:126:26)
at Context.eval (webpack-internal:///./cypress/component/DishCard.spec.tsx:16:66)
at Context.runnable.fn (http://localhost:51290/__cypress/runner/cypress_runner.js:152804:22)
at callFn (http://localhost:51290/__cypress/runner/cypress_runner.js:107017:22)
at Test.../driver/node_modules/mocha/lib/runnable.js.Runnable.run (http://localhost:51290/__cypress/runner/cypress_runner.js:107004:8)
at <unknown> (http://localhost:51290/__cypress/runner/cypress_runner.js:158755:29)
at PassThroughHandlerContext.finallyHandler (http://localhost:51290/__cypress/runner/cypress_runner.js:21441:24)
at PassThroughHandlerContext.tryCatcher (http://localhost:51290/__cypress/runner/cypress_runner.js:24887:24)

[lmiller1990]

I think that syntax is not a valid React component - looks like you may have copy pasted from the Vue example.

Can you try making a React component? Like this:

it('looks great', () => {
    const LookingGreat = () => {
      return (<div>Looking great</div>)
    }
    mount(<LookingGreat />)
    cy.findByTitle('SALMON')
})

I am actively working on better docs for specific frameworks and webpack config (eg nextjs + webpack 4, nextjs + webpack 5).

The main issue around nextjs is, unlike CRA and friends, they do not use a webpack installation in node_modules. Instead, they bundle webpack in their own source code (in node_modules/next/......somewhere....). So Cypress doesn't have any way to find webpack and the dependencies.

The solution I've found is adding the correct modules - eg yarn add webpack@4 html-webpack-plugin@4 or @5 if have webpack5: true in your next.config.js.

This definitely needs to be in our main docs, working on that :)

[lmiller1990]

Were you able to get this working?

[Norfeldt]

I did yarn add -D webpack@4 html-webpack-plugin@4 BTW

{
  "name": "locali-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest --watch"
  },
  "dependencies": {
    "@stripe/stripe-js": "^1.13.2",
    "class-name": "^0.1.3",
    "lodash": "^4.17.21",
    "next": "10.1.3",
    "next-stripe": "^1.0.0-beta.9",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "stripe": "^8.142.0",
    "swr": "^0.5.5"
  },
  "devDependencies": {
    "@cypress/react": "^5.3.4",
    "@cypress/webpack-dev-server": "^1.1.4",
    "@cypress/webpack-preprocessor": "^5.7.0",
    "@testing-library/cypress": "^7.0.6",
    "@testing-library/dom": "^7.30.4",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^13.1.5",
    "@types/jest": "^26.0.22",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.36",
    "@types/react": "^17.0.3",
    "babel-jest": "^26.6.3",
    "cypress": "^7.1.0",
    "html-webpack-plugin": "4",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "jest-extended": "^0.11.5",
    "sass": "^1.32.8",
    "ts-jest": "^26.5.5",
    "typescript": "^4.2.3",
    "webpack": "4",
    "webpack-dev-server": "^3.11.2"
  }
}

[lmiller1990]

Did this work? Any outstanding problems? I'm working on better docs here.

I have it working except I have a problem with CSS modules of the box. It's complicated but I fix it here and it will be released in about 24h.

If you use something other than the built-in CSS modules (like scss) it should be working.

[Norfeldt]

Thanks a ton @lmiller1990 👍 - Finally got it working! 🎉 🎉 🎉

Just gonna dump what made it work for me

yarn add -D cypress @cypress/webpack-dev-server @cypress/react html-webpack-plugin@4 webpack@4 webpack-dev-serv

./tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "~/*": ["*"]
    },
    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

./cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "include": ["../**/*.ts*"]
}

// ./cypress/plugins/index.ts
const injectDevServer = require('@cypress/react/plugins/next')

module.exports = (on, config) => {
  injectDevServer(on, config)
  return config
}

(Bonus to get testing library commands baked into cypress)

yarn add -D @testing-library/cypress

// ./cypress/support/index.ts
/// <reference types="cypress" />

import '@testing-library/cypress/add-commands'

// ./components/Dishcard/index.spec.tsx
import React from 'react'
import { mount } from '@cypress/react'

import DishCard from '.'
import { DishesProvider } from '~/context/dishes'
import { CartProvider } from '~/context/cart'

describe('DishCard', () => {
  it('looks great', () => {
    mount(
      <CartProvider>
        <DishesProvider>
          <DishCard id="dish02" />
        </DishesProvider>
      </CartProvider>
    )
    cy.findByText('CHICKEN', { exact: false })
  })
})

[Norfeldt]

@lmiller1990 Would you happen to know if there is a to set componentFolder to be a bunch of places?

Currently componentFolder is not documented on https://docs.cypress.io/guides/references/configuration#cypress-json - but can see that it only takes a string and not an array of strings.

Not sure if it's madness but trying to avoid src folder with components and context/state/store

{
  "testFiles": "**/*.spec.{js,ts,jsx,tsx}",
  "componentFolder": ["components", "context"]
}

[lmiller1990]

Great to see it's working. Also found this blog post with more info on configuring Next.js.

We should document componentFolder. We talk about it here.

I am having a similar problem to you, I want multiple component folders. You could do something like:

{
  "component": {
    "testFiles": "(component|context)/*spec.jsx"
  }
}

(not tested) but this isn't ideal, I think we should support multiple component folders. I'll talk to the team internally about this and get back to you, but implementing it should be quite easy.

[Norfeldt]

Was trying to but a glob into componentFolder and couldn't make things work. Then I realized that it's only the testFiles that work as a glob.

This works for me:

cypress.json

{
  "testFiles": "!(node_modules)/**/*.spec.{js,ts,jsx,tsx}",
  "componentFolder": "./"
}