reactjs - Cypress 组件测试缺少 package.json

Question

我有一个使用 webpack 和 Cypress E2E 测试的 React 应用程序。我正在尝试使用 Cypress 组件测试。我写了一个简单的测试如下:

describe('Hello World Test',  () => {
    it ('Button', () => {
        mount(<Button>Test button</Button>)
        cy.get('button').contains('Test button').click()
    })
});

当我运行 npx cypress open-ct 时，出现以下错误:

Your pluginsFile threw an error from: .../experimentation/webpack-transition/cypress/plugins/index.js

Error: Cannot find module 'react-scripts/package.json'

当我查看我的 node_modules 文件夹时，该文件不存在

@cypress/react/plugins/react-scripts/package.json (DNE)

cypress.json如下:

{
  "baseUrl": "http://localhost:8080",
  "component": {
    "componentFolder": "src",
    "testFiles": "**/*spec.{js,jsx,ts,tsx}"
  }
}

package.json如下:

{
  "name": "webpack-transition",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --env ENV=dev --mode development --open --hot",
    "build": "webpack ---env ENV=dev --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@types/react": "^17.0.40",
    "@types/react-dom": "^17.0.13",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.7.1",
    "cypress": "^9.5.1",
    "dotenv-webpack": "^7.1.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "source-map-loader": "^3.0.1",
    "style-loader": "^3.3.1",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "@cypress/react": "^5.12.4",
    "@cypress/webpack-dev-server": "^1.8.2",
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@hookform/resolvers": "^2.8.8",
    "@mui/icons-material": "^5.5.0",
    "@mui/lab": "^5.0.0-alpha.72",
    "@mui/material": "^5.5.0",
    "@reduxjs/toolkit": "^1.8.0",
    "aws-amplify": "^4.3.16",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.28.0",
    "react-icons": "^4.3.1",
    "react-redux": "^7.2.6",
    "yup": "^0.32.11"
  }
}

webpack.config 如下:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');

module.exports =  (env) => ({
  entry: './src/components/index.tsx',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
        exclude: /node_modules/,
        use: ['file-loader?name=[name].[ext]']
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico'
    }),
    new MiniCssExtractPlugin({
      filename: './src/index.css',
    }),
    new Dotenv({
      path: `./.env.${env.ENV}`
    }),
  ]
});

我要么使用了错误版本的库，要么在某处缺少配置。

Answer 1

您似乎为 Create React App (CRA) 配置了 /cypress/plugins/index.js，但尚未使用它来创建您的 React 应用。

来自文档 Install

React(使用 CRA)

// cypress/plugins/index.js

module.exports = (on, config) => {
  if (config.testingType === 'component') {
    require('@cypress/react/plugins/react-scripts')(on, config)
  }
  return config
}

尝试使用 Generic Webpack 配置

// cypress/plugins/index.js

module.exports = (on, config) => {
 if (config.testingType === 'component') {
   const { startDevServer } = require('@cypress/webpack-dev-server')

   // Your project's Webpack configuration
   const webpackConfig = require('../../webpack.config.js')

   on('dev-server:start', (options) =>
     startDevServer({ options, webpackConfig })
   )
 }
}