chore: update system tests to use react 18 and install latest depende…

…ncies for applicable system tests. use react18 harness before removal [run ci] (#30614)
cypress-io · Nov 14, 2024 · 53b24b1 · 53b24b1 · cypress-bot · Nov 14, 2024
1 parent 4f2a244
commit 53b24b1
Show file tree

Hide file tree

Showing 227 changed files with 23,633 additions and 46,872 deletions.
diff --git a/.circleci/workflows.yml b/.circleci/workflows.yml
@@ -1789,7 +1789,7 @@ jobs:
       PLATFORM: linux
     machine:
       # using `machine` gives us a Linux VM that can run Docker
-      image: ubuntu-2004:202111-02
+      image: ubuntu-2004:2024.05.1
       docker_layer_caching: true
     resource_class: medium
     steps:

diff --git a/npm/vue/package.json b/npm/vue/package.json
@@ -42,7 +42,7 @@
     "src/**/*.js"
   ],
   "engines": {
-    "node": ">=8"
+    "node": ">=18"
   },
   "types": "dist/index.d.ts",
   "license": "MIT",

diff --git a/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts b/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts
@@ -51,7 +51,8 @@ function loadErrorSpec (options: Options): VerifyFunc {
   return createVerify({ fileName: Cypress._.last(filePath.split('/')), hasPreferredIde: false, mode: 'component' })
 }
 
-const reactVersions = [17, 18] as const
+// keeping structure as to easily adapt for future versions of react
+const reactVersions = [18] as const
 
 reactVersions.forEach((reactVersion) => {
   describe(`React ${reactVersion}`, {
@@ -281,12 +282,12 @@ describe.skip('Svelte', {
   numTestsKeptInMemory: 1,
 }, () => {
   beforeEach(() => {
-    cy.scaffoldProject('svelte-webpack')
+    cy.scaffoldProject('svelte-webpack-configured')
   })
 
   it('error conditions', () => {
     const verify = loadErrorSpec({
-      projectName: 'svelte-webpack',
+      projectName: 'svelte-webpack-configured',
       configFile: 'cypress.config.js',
       filePath: 'src/errors.cy.js',
       failCount: 4,

diff --git a/packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts b/packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts
@@ -9,7 +9,7 @@ const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
   { projectName: 'next-14', test: 'index.cy' },
   { projectName: 'vue3-vite-ts-configured', test: 'HelloWorld.cy' },
   { projectName: 'vue3-webpack-ts-configured', test: 'HelloWorld.cy' },
-  { projectName: 'svelte-vite', test: 'App.cy' },
+  { projectName: 'svelte-vite-configured', test: 'App.cy' },
 ]
 
 // These are especially flaky on windows, skipping them there.

diff --git a/packages/data-context/test/unit/sources/WizardDataSource.spec.ts b/packages/data-context/test/unit/sources/WizardDataSource.spec.ts
@@ -18,7 +18,7 @@ describe('packagesToInstall', () => {
   it('regular react project with webpack', async () => {
     const ctx = createTestDataContext()
 
-    const projectPath = await scaffoldMigrationProject('react-app-webpack-5-unconfigured')
+    const projectPath = await scaffoldMigrationProject('react18-webpack-unconfigured')
 
     ctx.update((coreData) => {
       coreData.currentProject = projectPath

diff --git a/packages/scaffold-config/README.md b/packages/scaffold-config/README.md
@@ -15,8 +15,8 @@ We will also attempt to scaffold a configuration file for projects using React a
 | Vue              | -          | Vite       | 4.x, 5.x | Vue 3          | `@cypress/react@latest`    | [Link](../../system-tests/projects/vue3-vite-ts-configured)         |
 | Vue              | -          | Webpack    | 4.x, 5.x | Vue 3          | `@cypress/vue@latest`      | [Link](../../system-tests/projects/vue3-webpack-ts-configured)      |
 | Angular          | -          | Webpack    | 5.x      | Angular 17, 18 | `@cypress/angular@latest`  | [Link](../../system-tests/projects/angular-cli-configured)          |
-| Svelte           | -          | Vite       | 4.x, 5.x | Svelte 4       | `@cypress/svelte@latest`   | [Link](../../system-tests/projects/svelte-vite)                     |
-| Svelte           | -          | Webpack    | 4.x, 5.x | Svelte 4       | `@cypress/svelte@latest`   | [Link](../../system-tests/projects/svelte-webpack)                  |
+| Svelte           | -          | Vite       | 4.x, 5.x | Svelte 4       | `@cypress/svelte@latest`   | [Link](../../system-tests/projects/svelte-vite-configured)          |
+| Svelte           | -          | Webpack    | 4.x, 5.x | Svelte 4       | `@cypress/svelte@latest`   | [Link](../../system-tests/projects/svelte-webpack-configured)       |
 | Next.js          | 14.x       | Webpack    | 4.x, 5.x | React 18       | `@cypress/react@latest`    | [Link](../../system-tests/projects/nextjs-configured)               |
 
 ### Adding More Projects

diff --git a/packages/scaffold-config/test/unit/detect.spec.ts b/packages/scaffold-config/test/unit/detect.spec.ts
@@ -76,10 +76,10 @@ const resolvedCtFrameworks = CT_FRAMEWORKS.map((x) => resolveComponentFrameworkD
 
 describe('detectFramework', () => {
   it('React App with webpack 5', async () => {
-    const projectPath = await scaffoldMigrationProject('react-app-webpack-5-unconfigured')
+    const projectPath = await scaffoldMigrationProject('react18-webpack-unconfigured')
 
     fakeDepsInNodeModules(projectPath, [
-      { dependency: 'react', version: '16.0.0' },
+      { dependency: 'react', version: '18.0.0' },
       { devDependency: 'webpack', version: '5.0.0' },
     ])
 

diff --git a/system-tests/__snapshots__/component_testing_spec.ts.js b/system-tests/__snapshots__/component_testing_spec.ts.js
@@ -17,7 +17,6 @@ exports['React major versions with Webpack executes all of the tests for React v
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
   Running:  App.cy.jsx                                                                      (1 of 5)
-   53 modules
 
 
   ✓ renders hello world

diff --git a/system-tests/__snapshots__/webpack_dev_server_fresh_spec.ts.js b/system-tests/__snapshots__/webpack_dev_server_fresh_spec.ts.js
@@ -15,7 +15,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
   Running:  port.cy.jsx                                                                     (1 of 1)
-   41 modules
 
 
   ✓ ensures we have launched at the overridden port
@@ -69,9 +68,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
   Running:  port.cy.jsx                                                                     (1 of 1)
-6 assets
-58 modules
-webpack x.x.x compiled successfully in xxx ms
 
 
   ✓ ensures we have launched at the overridden port
@@ -127,7 +123,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
   Running:  App.cy.jsx                                                                      (1 of 9)
-   51 modules
 
 ERROR in ./src/AppCompilationError.cy.jsx
 Module build failed (from [..]):
@@ -173,7 +168,7 @@ SyntaxError: /foo/bar/.projects/webpack4_wds4-react/src/AppCompilationError.cy.j
   1 failing
 
   1) An uncaught error was detected outside of a test:
-     Error: The following error originated from your test code, not from Cypress.
+     The following error originated from your test code, not from Cypress.
 
   > Module build failed (from [..]):
 SyntaxError: /foo/bar/.projects/webpack4_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
@@ -190,6 +185,23 @@ When Cypress detects uncaught errors originating from your test code it will aut
 Cypress could not associate this error to any specific test.
 
 We dynamically generated a new test to display this failure.
+  Error: The following error originated from your test code, not from Cypress.
+  
+    > Module build failed (from [..]):
+  SyntaxError: /foo/bar/.projects/webpack4_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
+  
+    6 |   cy.get('h1').contains('Hello World')
+    7 | }
+  > 8 | })
+      | ^
+    9 |
+      [stack trace lines]
+  
+  When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
+  
+  Cypress could not associate this error to any specific test.
+  
+  We dynamically generated a new test to display this failure.
       [stack trace lines]
 
 
@@ -550,9 +562,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
   Running:  App.cy.jsx                                                                      (1 of 9)
-16 assets
-68 modules
-
 ERROR in ./src/AppCompilationError.cy.jsx
 Module build failed (from [..]):
 SyntaxError: /foo/bar/.projects/webpack5_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
@@ -564,7 +573,7 @@ SyntaxError: /foo/bar/.projects/webpack5_wds4-react/src/AppCompilationError.cy.j
   9 |
       [stack trace lines]
 
-webpack x.x.x compiled with x errors in xxx ms
+webpack compiled with 1 error
 
 
   ✓ renders hello world
@@ -599,7 +608,7 @@ webpack x.x.x compiled with x errors in xxx ms
   1 failing
 
   1) An uncaught error was detected outside of a test:
-     Error: The following error originated from your test code, not from Cypress.
+     The following error originated from your test code, not from Cypress.
 
   > Module build failed (from [..]):
 SyntaxError: /foo/bar/.projects/webpack5_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
@@ -616,6 +625,23 @@ When Cypress detects uncaught errors originating from your test code it will aut
 Cypress could not associate this error to any specific test.
 
 We dynamically generated a new test to display this failure.
+  Error: The following error originated from your test code, not from Cypress.
+  
+    > Module build failed (from [..]):
+  SyntaxError: /foo/bar/.projects/webpack5_wds4-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
+  
+    6 |   cy.get('h1').contains('Hello World')
+    7 | }
+  > 8 | })
+      | ^
+    9 |
+      [stack trace lines]
+  
+  When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
+  
+  Cypress could not associate this error to any specific test.
+  
+  We dynamically generated a new test to display this failure.
       [stack trace lines]
 
 
@@ -976,9 +1002,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
   Running:  App.cy.jsx                                                                      (1 of 9)
-16 assets
-72 modules
-
 ERROR in ./src/AppCompilationError.cy.jsx
 Module build failed (from [..]):
 SyntaxError: /foo/bar/.projects/webpack5_wds5-react/src/AppCompilationError.cy.jsx: Unexpected token, expected "," (8:0)
@@ -990,7 +1013,7 @@ SyntaxError: /foo/bar/.projects/webpack5_wds5-react/src/AppCompilationError.cy.j
   9 |
       [stack trace lines]
 
-webpack x.x.x compiled with x errors in xxx ms
+webpack compiled with 1 error
 
 
   ✓ renders hello world
@@ -1417,9 +1440,6 @@ exports['@cypress/webpack-dev-server / react / executes all of the tests for web
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
   Running:  port.cy.jsx                                                                     (1 of 1)
-6 assets
-62 modules
-webpack x.x.x compiled successfully in xxx ms
 
 
   ✓ ensures we have launched at the overridden port
@@ -1462,7 +1482,7 @@ Your configFile threw an error from: cypress-webpack.config.ts
 We stopped running your tests because your config file crashed.
 
 CypressWebpackDevServerError: Incompatible major versions of webpack and webpack-dev-server!
-      webpack-dev-server major version 5 only works with major versions of webpack 5 - saw webpack-dev-server version 5.0.4.
+      webpack-dev-server major version 5 only works with major versions of webpack 5 - saw webpack-dev-server version 5.1.0.
       If using webpack major version 4, please install webpack-dev-server version 4 to be used with @cypress/webpack-dev-server or upgrade to webpack 5.
       [stack trace lines]
 `
diff --git a/system-tests/project-fixtures/react/cypress-webpack.config.ts b/system-tests/project-fixtures/react/cypress-webpack.config.ts
@@ -30,7 +30,7 @@ export default defineConfig({
       bundler: 'webpack',
       webpackConfig: {
         ...webpackConfig,
-        stats: 'minimal',
+        stats: 'errors-only',
       },
     },
   },

diff --git a/system-tests/project-fixtures/react/cypress/support/component.js b/system-tests/project-fixtures/react/cypress/support/component.js
@@ -1,4 +1,4 @@
-import { mount } from 'cypress/react'
+import { mount } from 'cypress/react18'
 
 import './backgroundColor.css'
 

diff --git a/system-tests/project-fixtures/react/vite.config.js b/system-tests/project-fixtures/react/vite.config.js
@@ -1,11 +1,5 @@
 const { defineConfig } = require('vite')
 
 module.exports = defineConfig({
-  resolve: {
-    alias: {
-      'react': require.resolve('react'),
-      'react-dom': require.resolve('react-dom'),
-    },
-  },
   logLevel: 'silent',
 })
diff --git a/system-tests/projects/coffee-react-interop/package.json b/system-tests/projects/coffee-react-interop/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   }
 }
diff --git a/system-tests/projects/coffee-react-interop/yarn.lock b/system-tests/projects/coffee-react-interop/yarn.lock
@@ -14,32 +14,24 @@ loose-envify@^1.1.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
-
-[email protected]:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+[email protected]:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.2"
 
-react@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@18.3.1:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
diff --git a/system-tests/projects/config-cjs-and-esm/config-node-next/package.json b/system-tests/projects/config-cjs-and-esm/config-node-next/package.json
@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "typescript": "4.7.3"
+    "typescript": "5.6.3"
   },
   "type": "module",
   "projectFixtureDirectory": "simple_passing"

diff --git a/system-tests/projects/config-cjs-and-esm/config-node-next/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-node-next/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-typescript@4.7.3:
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
-  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
+typescript@5.6.3:
+  version "5.6.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/package.json b/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/package.json
@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "typescript": "4.7.3"
+    "typescript": "5.6.3"
   },
   "projectFixtureDirectory": "simple_passing"
 }
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-typescript@4.7.3:
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
-  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
+typescript@5.6.3:
+  version "5.6.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/package.json b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/package.json
@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "typescript": "4.7.3"
+    "typescript": "5.6.3"
   },
   "projectFixtureDirectory": "simple_passing"
 }
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-typescript@4.7.3:
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
-  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
+typescript@5.6.3:
+  version "5.6.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/README.md b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/README.md
@@ -0,0 +1,3 @@
+# Typescript versioning
+
+Typescript v4.9.5 is used here as Typescript v5 does NOT support E3 as a target. Once Cypress drops support for TypeScript 4, this project can be removed.
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/package.json b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/package.json
@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "typescript": "4.7.3"
+    "typescript": "4.9.5"
   },
   "projectFixtureDirectory": "simple_passing"
 }
-Original file line number
+Diff line change
@@ Expand Up @@
     ────────────────────────────────────────────────────────────────────────────────────────────────────
       Running:  App.cy.jsx                                                                      (1 of 5)
-modules
       ✓ renders hello world
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Typescript versioning

		Typescript v4.9.5 is used here as Typescript v5 does NOT support E3 as a target. Once Cypress drops support for TypeScript 4, this project can be removed.