breaking: remove support for create react app for component testing a…

…s it is no longer maintained [run ci] (#30558)

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-11-06-24-angular-signals-removal
+11-07-24-cra-removal

.gitignore

@@ -298,7 +298,6 @@ dist/
 
 # Uncomment the public line if your project uses Gatsby
 # https://nextjs.org/blog/next-9-1#public-directory-support
-# https://create-react-app.dev/docs/using-the-public-folder/#docsNav
 # public
 
 # Storybook build outputs

cli/CHANGELOG.md

@@ -22,6 +22,7 @@ _Released 12/3/2024 (PENDING)_
 - Cypress Component Testing no longer supports `Next.js` versions 10, 11, 12, and 13. Addresses [#29583](https://github.com/cypress-io/cypress/issues/29583).
 - Cypress Component Testing no longer supports `Angular` versions 13, 14, 15, and 16. The minimum supported version is now `17.2.0` in order to fully support Angular [signals](https://angular.dev/guide/signals). Addresses [#29582](https://github.com/cypress-io/cypress/issues/29582). Addressed in [#30539](https://github.com/cypress-io/cypress/pull/30539).
 - The `cypress/angular-signals` test harness is no longer included in the Cypress binary. Instead, signals support is now shipped with `cypress/angular`! This requires `rxjs` to be installed as a `peerDependency`. Addresses [#29606](https://github.com/cypress-io/cypress/issues/29606).
+- Cypress Component Testing no longer supports `create-react-app`. Addresses [#30028](https://github.com/cypress-io/cypress/issues/30028).
 
 **Deprecations:**
 

cli/types/cypress.d.ts

@@ -3340,19 +3340,19 @@ declare namespace Cypress {
   interface CypressComponentDependency {
     /**
      * Unique identifier.
-     * @example 'reactscripts'
+     * @example 'react'
      */
     type: string
 
     /**
      * Name to display in the user interface.
-     * @example "React Scripts"
+     * @example "React.js"
      */
     name: string
 
     /**
      * Package name on npm.
-     * @example react-scripts
+     * @example react
      */
     package: string
 
@@ -3363,21 +3363,20 @@ declare namespace Cypress {
      *
      * @example `react`
      * @example `react@18`
-     * @example `react-scripts`
      */
     installer: string
 
     /**
      * Description shown in UI. It is recommended to use the same one the package uses on npm.
-     * @example  'Create React apps with no build configuration'
+     * @example  'A JavaScript library for building user interfaces'
      */
     description: string
 
     /**
      * Minimum version supported. Should conform to Semantic Versioning as used in `package.json`.
      * @see https://docs.npmjs.com/cli/v9/configuring-npm/package-json#dependencies
-     * @example '^=4.0.0 || ^=5.0.0'
-     * @example '^2.0.0'
+     * @example '^=17.0.0 || ^=8.0.0'
+     * @example '^4.0.0'
      */
     minVersion: string
   }
@@ -3386,7 +3385,7 @@ declare namespace Cypress {
     /**
      * A semantic, unique identifier.
      * Must begin with `cypress-ct-` or `@org/cypress-ct-` for third party implementations.
-     * @example 'reactscripts'
+     * @example 'react'
      * @example 'nextjs'
      * @example 'cypress-ct-solid-js'
      */
@@ -3400,7 +3399,7 @@ declare namespace Cypress {
      *   export default {
      *     component: {
      *       devServer: {
-     *         framework: 'create-react-app' // can be 'next', 'create-react-app', etc etc.
+     *         framework: 'react' // can be 'next', 'vue', etc etc.
      *       }
      *     }
      *   }
@@ -3415,7 +3414,7 @@ declare namespace Cypress {
     /**
      * Name displayed in Launchpad when doing initial setup.
      * @example 'Solid.js'
-     * @example 'Create React App'
+     * @example 'React.js'
      */
     name: string
 
@@ -3516,7 +3515,7 @@ declare namespace Cypress {
 
   type DevServerConfigOptions = {
     bundler: 'webpack'
-    framework: 'react' | 'vue' | 'vue-cli' | 'create-react-app' | 'next' | 'svelte'
+    framework: 'react' | 'vue' | 'vue-cli' | 'next' | 'svelte'
     webpackConfig?: ConfigHandler<PickConfigOpt<'webpackConfig'>>
   } | {
     bundler: 'vite'

cli/types/tests/cypress-npm-api-test.ts

@@ -114,15 +114,6 @@ const componentConfigVueCliWebpack: Cypress.ConfigOptions = {
   }
 }
 
-const componentConfigCRAWebpack: Cypress.ConfigOptions = {
-  component: {
-    devServer: {
-      bundler: 'webpack',
-      framework: 'create-react-app',
-    }
-  }
-}
-
 const componentConfigViteReact: Cypress.ConfigOptions = {
   component: {
     devServer: {

npm/react/examples.env

@@ -1,11 +1,8 @@
 
 /examples/nextjs
 # /examples/nextjs-webpack-5
-/examples/react-scripts
-/examples/react-scripts-typescript
 /examples/find-webpack
 /examples/webpack-file
-/examples/react-scripts-folder
 /examples/using-babel-typescript
 /examples/webpack-options
 /examples/sass-and-ts

npm/vite-dev-server/README.md

@@ -12,7 +12,7 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   component: {
     devServer: {
-      framework: 'create-react-app',
+      framework: 'react',
       bundler: 'vite',
       // viteConfig?: Will try to infer, if passed it will be used as is
     }

npm/webpack-dev-server/README.md

@@ -12,7 +12,7 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   component: {
     devServer: {
-      framework: 'create-react-app',
+      framework: 'react',
       bundler: 'webpack',
       // webpackConfig?: Will try to infer, if passed it will be used as is
     }
@@ -31,7 +31,7 @@ export default defineConfig({
     devServer(devServerConfig) {
       return devServer({
         ...devServerConfig,
-        framework: 'create-react-app',
+        framework: 'react',
         webpackConfig: require('./webpack.config.js')
       })
     }
@@ -50,7 +50,6 @@ This module should be primarily covered by system-tests / open-mode tests. All s
 - webpack4_wds4-react
 - webpack5_wds5-react
 - webpack4_wds4-next-11
-- webpack4_wds4-create-react-app
 
 ## Architecture
 

npm/webpack-dev-server/src/devServer.ts

@@ -8,7 +8,6 @@ import type { Compiler, Configuration } from 'webpack'
 import { createWebpackDevServer } from './createWebpackDevServer'
 import debugLib from 'debug'
 import { vueCliHandler } from './helpers/vueCliHandler'
-import { createReactAppHandler } from './helpers/createReactAppHandler'
 import { nextHandler } from './helpers/nextHandler'
 import { sourceDefaultWebpackDependencies, SourceRelativeWebpackResult } from './helpers/sourceRelativeWebpackModules'
 import { angularHandler } from './helpers/angularHandler'
@@ -108,9 +107,6 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
   }
 
   switch (devServerConfig.framework) {
-    case 'create-react-app':
-      return createReactAppHandler(devServerConfig)
-
     case 'vue-cli':
       return await vueCliHandler(devServerConfig)