Merge branch 'develop' into mschile/chrome_for_testing

browser-versions.json

@@ -1,5 +1,5 @@
 {
   "chrome:beta": "132.0.6834.32",
-  "chrome:stable": "131.0.6778.108",
+  "chrome:stable": "131.0.6778.139",
   "chrome:minimum": "64.0.3282.0"
 }

cli/CHANGELOG.md

@@ -11,6 +11,11 @@ _Released 12/17/2024 (PENDING)_
 
 - Fixed an issue where targets may hang if `Network.enable` is not implemented for the target. Addresses [#29876](https://github.com/cypress-io/cypress/issues/29876).
 - Updated Firefox `userChrome.css` to correctly hide the toolbox during headless mode. Addresses [#30721](https://github.com/cypress-io/cypress/issues/30721).
+- Fixed an issue loading the `cypress.config.ts` file with Node.js version `22.12.0`. Addresses [#30715](https://github.com/cypress-io/cypress/issues/30715).
+
+**Misc:**
+
+- Removed a comment from the scaffolded `supportFile` for component tests around CommonJS syntax. Addresses [#23287](https://github.com/cypress-io/cypress/issues/23287).
 
 **Dependency Updates:**
 

packages/data-context/src/data/ProjectConfigIpc.ts

@@ -313,6 +313,14 @@ export class ProjectConfigIpc extends EventEmitter {
           tsNodeEsmLoader = `${tsNodeEsmLoader} --no-experimental-detect-module`
         }
 
+        // in nodejs 22.12.0, the --experimental-require-module option is now enabled by default.
+        // We need to disable it with the --no-experimental-require-module flag.
+        // @see https://github.com/cypress-io/cypress/issues/30715
+        if (this.nodeVersion && semver.gte(this.nodeVersion, '22.12.0')) {
+          debug(`detected node version ${this.nodeVersion}, adding --no-experimental-require-module option to child_process NODE_OPTIONS.`)
+          tsNodeEsmLoader = `${tsNodeEsmLoader} --no-experimental-require-module`
+        }
+
         if (childOptions.env.NODE_OPTIONS) {
           childOptions.env.NODE_OPTIONS += ` ${tsNodeEsmLoader}`
         } else {

packages/data-context/test/unit/data/ProjectConfigIpc.spec.ts

@@ -1,5 +1,6 @@
 import childProcess from 'child_process'
 import { expect } from 'chai'
+import semver from 'semver'
 import sinon from 'sinon'
 import { scaffoldMigrationProject as scaffoldProject } from '../helper'
 import { ProjectConfigIpc } from '../../../src/data/ProjectConfigIpc'
@@ -34,8 +35,11 @@ describe('ProjectConfigIpc', () => {
   })
 
   context('forkChildProcess', () => {
-    const NODE_VERSIONS = ['18.20.4', '20.17.0']
-    const NODE_VERSIONS_22_7_0_AND_UP = ['22.7.0', '22.11.4']
+    // some of these node versions may not exist, but we want to verify
+    // the experimental flags are correctly disabled for future versions
+    const NODE_VERSIONS = ['18.20.4', '20.17.0', '22.7.0', '22.11.4', '22.12.0', '22.15.0']
+    const experimentalDetectModuleIntroduced = '22.7.0'
+    const experimentalRequireModuleIntroduced = '22.12.0'
 
     let projectConfigIpc
     let forkSpy
@@ -52,10 +56,10 @@ describe('ProjectConfigIpc', () => {
     })
 
     context('typescript', () => {
-      [...NODE_VERSIONS, ...NODE_VERSIONS_22_7_0_AND_UP].forEach((nodeVersion) => {
+      [...NODE_VERSIONS].forEach((nodeVersion) => {
         context(`node v${nodeVersion}`, () => {
           context('ESM', () => {
-            it('uses the experimental module loader if ESM is being used with typescript', async () => {
+            it('passes the correct experimental flags if ESM is being used with typescript', async () => {
               // @ts-expect-error
               const projectPath = await scaffoldProject('config-cjs-and-esm/config-with-ts-module')
 
@@ -77,35 +81,23 @@ describe('ProjectConfigIpc', () => {
                   NODE_OPTIONS: sinon.match('--experimental-specifier-resolution=node --loader'),
                 },
               }))
-            })
-
-            // @see https://github.com/cypress-io/cypress/issues/30084
-            // at time of writing, 22.11.4 is a node version that does not exist. We are using this version to test the logic for future proofing.
-            if (NODE_VERSIONS_22_7_0_AND_UP.includes(nodeVersion)) {
-              it(`additionally adds --no-experimental-detect-module for node versions 22.7.0 and up if ESM is being used with typescript`, async () => {
-                // @ts-expect-error
-                const projectPath = await scaffoldProject('config-cjs-and-esm/config-with-ts-module')
-
-                const MOCK_NODE_PATH = `/Users/foo/.nvm/versions/node/v${nodeVersion}/bin/node`
-                const MOCK_NODE_VERSION = nodeVersion
-
-                projectConfigIpc = new ProjectConfigIpc(
-                  MOCK_NODE_PATH,
-                  MOCK_NODE_VERSION,
-                  projectPath,
-                  'cypress.config.js',
-                  false,
-                  (error) => {},
-                  () => {},
-                )
 
+              if (semver.gte(nodeVersion, experimentalDetectModuleIntroduced)) {
                 expect(forkSpy).to.have.been.calledWith(sinon.match.string, sinon.match.array, sinon.match({
                   env: {
                     NODE_OPTIONS: sinon.match('--no-experimental-detect-module'),
                   },
                 }))
-              })
-            }
+              }
+
+              if (semver.gte(nodeVersion, experimentalRequireModuleIntroduced)) {
+                expect(forkSpy).to.have.been.calledWith(sinon.match.string, sinon.match.array, sinon.match({
+                  env: {
+                    NODE_OPTIONS: sinon.match('--no-experimental-require-module'),
+                  },
+                }))
+              }
+            })
           })
 
           context('CommonJS', () => {

packages/driver/cypress/support/e2e.js

@@ -1,18 +1 @@
-// ***********************************************************
-// This example support/e2e.js is processed and
-// loaded automatically before your other test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/guides/configuration#section-global
-// ***********************************************************
-
-// Alternatively you can use CommonJS syntax:
-// require("./commands")
 require('./defaults')

packages/scaffold-config/src/supportFile.ts

@@ -20,9 +20,6 @@ export function supportFileE2E (language: CodeLanguage['type']) {
 
     // Import commands.js using ES2015 syntax:
     import './commands'
-
-    // Alternatively you can use CommonJS syntax:
-    // require('./commands')
   `
 }
 
@@ -45,9 +42,6 @@ export function supportFileComponent (language: CodeLanguage['type'], mountModul
 
     // Import commands.js using ES2015 syntax:
     import './commands'
-
-    // Alternatively you can use CommonJS syntax:
-    // require('./commands')
   `
 
   const exampleUse = dedent`

packages/scaffold-config/test/unit/supportFile.spec.ts

@@ -27,9 +27,6 @@ describe('supportFileComponent', () => {
           // Import commands.js using ES2015 syntax:
           import './commands'
 
-          // Alternatively you can use CommonJS syntax:
-          // require('./commands')
-
           import { mount } from '${mountModule}'
 
           Cypress.Commands.add('mount', mount)
@@ -61,9 +58,6 @@ describe('supportFileComponent', () => {
         // Import commands.js using ES2015 syntax:
         import './commands'
 
-        // Alternatively you can use CommonJS syntax:
-        // require('./commands')
-
         import { mount } from '${mountModule}'
 
         // Augment the Cypress namespace to include type definitions for
@@ -111,9 +105,6 @@ describe('supportFileComponent', () => {
           // Import commands.js using ES2015 syntax:
           import './commands'
 
-          // Alternatively you can use CommonJS syntax:
-          // require('./commands')
-
           import { mount } from '${mountModule}'
 
           Cypress.Commands.add('mount', mount)
@@ -145,9 +136,6 @@ describe('supportFileComponent', () => {
         // Import commands.js using ES2015 syntax:
         import './commands'
 
-        // Alternatively you can use CommonJS syntax:
-        // require('./commands')
-
         import { mount } from '${mountModule}'
 
         // Augment the Cypress namespace to include type definitions for
@@ -195,9 +183,6 @@ describe('supportFileComponent', () => {
         // Import commands.js using ES2015 syntax:
         import './commands'
 
-        // Alternatively you can use CommonJS syntax:
-        // require('./commands')
-
         import { mount } from '${mountModule}'
 
         // Augment the Cypress namespace to include type definitions for
@@ -244,9 +229,6 @@ describe('supportFileComponent', () => {
           // Import commands.js using ES2015 syntax:
           import './commands'
 
-          // Alternatively you can use CommonJS syntax:
-          // require('./commands')
-
           import { mount } from 'cypress/svelte'
 
           Cypress.Commands.add('mount', mount)
@@ -278,9 +260,6 @@ describe('supportFileComponent', () => {
         // Import commands.js using ES2015 syntax:
         import './commands'
 
-        // Alternatively you can use CommonJS syntax:
-        // require('./commands')
-
         import { mount } from 'cypress/svelte'
 
         // Augment the Cypress namespace to include type definitions for

system-tests/projects/angular-cli-configured/cypress/support/component.ts

@@ -16,9 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 import { mount } from 'cypress/angular'
 
 // Augment the Cypress namespace to include type definitions for

system-tests/projects/config-cjs-and-esm/config-with-ts-module/cypress.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   e2e: {
     supportFile: false,
-    setupNodeEvents: async (_, config) => {
+    setupNodeEvents: async (_, config: Cypress.PluginConfigOptions) => {
       await import('find-up')
 
       return config

system-tests/projects/config-with-invalid-browser/cypress/support/e2e.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/migration-e2e-custom-supportFile/src/platform/testing/e2e/cypress/support/index.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/no-specs-vue-2/cypress/support/component.js

@@ -16,9 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 import { mount } from 'cypress/vue2'
 
 Cypress.Commands.add('mount', mount)

system-tests/projects/no-specs/cypress/support/component.js

@@ -16,9 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 import { mount } from 'cypress/react'
 
 Cypress.Commands.add('mount', mount)

system-tests/projects/plugin-code-coverage/cypress/support/e2e.js

@@ -15,5 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import '@cypress/code-coverage/support'
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/plugin-returns-bad-config/cypress/support/e2e.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/plugin-returns-empty-browsers-list/cypress/support/e2e.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/plugin-returns-invalid-browser/cypress/support/e2e.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/pristine-cjs-project/expected-cypress-js-component-vue.js-3-webpack/support/component.js

@@ -16,9 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 import { mount } from 'cypress/vue'
 
 Cypress.Commands.add('mount', mount)

system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress/support/e2e.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/component.js

@@ -16,9 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 import { mount } from 'cypress/react'
 
 Cypress.Commands.add('mount', mount)

system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/e2e.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/pristine/expected-cypress-js-e2e/cypress/support/e2e.js

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/component.ts

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component.ts

@@ -16,9 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 import { mount } from 'cypress/react'
 
 // Augment the Cypress namespace to include type definitions for

system-tests/projects/pristine/expected-cypress-ts-e2e/cypress/support/e2e.ts

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/ts-proj-4-5/cypress/support/e2e.ts

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 // import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/ts-proj-5/cypress/support/e2e.ts

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 // import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

system-tests/projects/ts-proj/cypress/support/e2e.ts

@@ -15,6 +15,3 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')