Using Cypress Component Testing with a NextJS application

Question

I think I need a little help on how to use the cypress plugin for nextJS in order to run Cypress Components Test

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?

Answer 1

I found a working solution on cypress discussion

Just gonna dump what made it work for me

Updated NextJS to the latest version.

Then I also did

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

./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 })
  })
})