update system tests to use react 18 and install latest dependencies f…

…or applicable system tests. use react18 harness before removal rebase this in to system test updates update yarn lock squash this squash this squash squash
cypress-io · Nov 13, 2024 · 7e45094 · 7e45094
1 parent 1dc8c98
commit 7e45094
Show file tree

Hide file tree

Showing 227 changed files with 23,683 additions and 46,828 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
@@ -16,8 +16,7 @@ exports['React major versions with Webpack executes all of the tests for React v
 
 ────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                     
-  Running:  App.cy.jsx                                                                      (1 of 5)
-   53 modules
+  Running:  App.cy.jsx                                                                      (1 of 4)
 
 
   ✓ 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"
 }