在 NextJS 应用程序中使用 Cypress 组件测试答案

【问题标题】：Using Cypress Component Testing with a NextJS application在 NextJS 应用程序中使用 Cypress 组件测试
【发布时间】：2021-07-16 15:31:54
【问题描述】：

我想我需要一点帮助来了解如何使用 nextJS 的 cypress 插件来运行 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
}

尝试开始测试会引发options.rewrites.map is not a function 错误

$ 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)

我错过了什么吗？

【问题讨论】：

在开发 Storybook 插件时遇到了同样的问题。重写不是使用对象，但我不明白为什么 BuildManifestPlugin 不检查它。
@EricBurel 我发布了一个答案。它对你有用，然后给 et 投票。
它似乎与一些不匹配的版本有关，通过更新 Next 它再次对我有用（我正在使用本地安装的 Canary 分支）

标签： reactjs typescript next.js cypress

【解决方案1】：

我在cypress discussion找到了一个可行的解决方案

只是想把它对我有用的东西扔掉

将 NextJS 更新到最新版本。

然后我也做了

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
}

（获得测试库命令的奖励）

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

【讨论】：