Cypress Component Testing Missing package.json

Question

I have a React App that uses webpack and Cypress E2E testing. I'm trying to use Cypress component testing. I have written a simple test as follows:

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

When I run npx cypress open-ct I get the following error:

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

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

When I look in to my node_modules folder that file does not exist under

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

cypress.json is as follows:

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

package.json is as follows:

{
  "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 is as follows:

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}`
    }),
  ]
});

I'm either using the wrong version of a library or I'm missing a configuration somewhere.

Answer 1

It looks like you configured /cypress/plugins/index.js for Create React App (CRA) but have not use it to create your react app.

From the docs Install

React (using CRA)

// cypress/plugins/index.js

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

Instead try the Generic Webpack configuration

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