fix: terminal error message for non migrated config (#21467)

* fix: terminal error message for non migrated config

* fix: terminal error message for non migrated config

cli/__snapshots__/cli_spec.js

@@ -23,20 +23,20 @@ exports['shows help for open --foo 1'] = `
     --component                      runs component tests
     -c, --config <config>            sets configuration values. separate multiple
                                      values with a comma. overrides any value in
-                                     cypress.config.{ts|js}.
+                                     cypress.config.{js,ts,mjs,cjs}.
     -C, --config-file <config-file>  path to script file where configuration
                                      values are set. defaults to
-                                     "cypress.config.{ts|js}".
+                                     "cypress.config.{js,ts,mjs,cjs}".
     -d, --detached [bool]            runs Cypress application in detached mode
     --e2e                            runs end to end tests
     -e, --env <env>                  sets environment variables. separate
                                      multiple values with a comma. overrides any
-                                     value in cypress.config.{ts|js} or
+                                     value in cypress.config.{js,ts,mjs,cjs} or
                                      cypress.env.json
     --global                         force Cypress into global mode as if its
                                      globally installed
     -p, --port <port>                runs Cypress on a specific port. overrides
-                                     any value in cypress.config.{ts|js}.
+                                     any value in cypress.config.{js,ts,mjs,cjs}.
     -P, --project <project-path>     path to the project
     --dev                            runs cypress in development and bypasses
                                      binary check
@@ -70,17 +70,17 @@ exports['shows help for run --foo 1'] = `
     -b, --browser <browser-name-or-path>       runs Cypress in the browser with the given name. if a filesystem path is supplied, Cypress will attempt to use the browser at that path.
     --ci-build-id <id>                         the unique identifier for a run on your CI provider. typically a "BUILD_ID" env var. this value is automatically detected for most CI providers
     --component                                runs component tests
-    -c, --config <config>                      sets configuration values. separate multiple values with a comma. overrides any value in cypress.config.{ts|js}.
-    -C, --config-file <config-file>            path to script file where configuration values are set. defaults to "cypress.config.{ts|js}".
+    -c, --config <config>                      sets configuration values. separate multiple values with a comma. overrides any value in cypress.config.{js,ts,mjs,cjs}.
+    -C, --config-file <config-file>            path to script file where configuration values are set. defaults to "cypress.config.{js,ts,mjs,cjs}".
     --e2e                                      runs end to end tests
-    -e, --env <env>                            sets environment variables. separate multiple values with a comma. overrides any value in cypress.config.{ts|js} or cypress.env.json
+    -e, --env <env>                            sets environment variables. separate multiple values with a comma. overrides any value in cypress.config.{js,ts,mjs,cjs} or cypress.env.json
     --group <name>                             a named group for recorded runs in the Cypress Dashboard
     -k, --key <record-key>                     your secret Record Key. you can omit this if you set a CYPRESS_RECORD_KEY environment variable.
     --headed                                   displays the browser instead of running headlessly
     --headless                                 hide the browser instead of running headed (default for cypress run)
     --no-exit                                  keep the browser open after tests finish
     --parallel                                 enables concurrent runs and automatic load balancing of specs across multiple machines or processes
-    -p, --port <port>                          runs Cypress on a specific port. overrides any value in cypress.config.{ts|js}.
+    -p, --port <port>                          runs Cypress on a specific port. overrides any value in cypress.config.{js,ts,mjs,cjs}.
     -P, --project <project-path>               path to the project
     -q, --quiet                                run quietly, using only the configured reporter
     --record [bool]                            records the run. sends test results, screenshots and videos to your Cypress Dashboard.

cli/lib/cli.js

@@ -101,12 +101,12 @@ const descriptions = {
   cacheSize: 'Used with the list command to show the sizes of the cached folders',
   ciBuildId: 'the unique identifier for a run on your CI provider. typically a "BUILD_ID" env var. this value is automatically detected for most CI providers',
   component: 'runs component tests',
-  config: 'sets configuration values. separate multiple values with a comma. overrides any value in cypress.config.{ts|js}.',
-  configFile: 'path to script file where configuration values are set. defaults to "cypress.config.{ts|js}".',
+  config: 'sets configuration values. separate multiple values with a comma. overrides any value in cypress.config.{js,ts,mjs,cjs}.',
+  configFile: 'path to script file where configuration values are set. defaults to "cypress.config.{js,ts,mjs,cjs}".',
   detached: 'runs Cypress application in detached mode',
   dev: 'runs cypress in development and bypasses binary check',
   e2e: 'runs end to end tests',
-  env: 'sets environment variables. separate multiple values with a comma. overrides any value in cypress.config.{ts|js} or cypress.env.json',
+  env: 'sets environment variables. separate multiple values with a comma. overrides any value in cypress.config.{js,ts,mjs,cjs} or cypress.env.json',
   exit: 'keep the browser open after tests finish',
   forceInstall: 'force install the Cypress binary',
   global: 'force Cypress into global mode as if its globally installed',
@@ -115,7 +115,7 @@ const descriptions = {
   headless: 'hide the browser instead of running headed (default for cypress run)',
   key: 'your secret Record Key. you can omit this if you set a CYPRESS_RECORD_KEY environment variable.',
   parallel: 'enables concurrent runs and automatic load balancing of specs across multiple machines or processes',
-  port: 'runs Cypress on a specific port. overrides any value in cypress.config.{ts|js}.',
+  port: 'runs Cypress on a specific port. overrides any value in cypress.config.{js,ts,mjs,cjs}.',
   project: 'path to the project',
   quiet: 'run quietly, using only the configured reporter',
   record: 'records the run. sends test results, screenshots and videos to your Cypress Dashboard.',

cli/types/cypress-npm-api.d.ts

@@ -142,7 +142,7 @@ declare namespace CypressCommandLine {
     /**
      * Path to the config file to be used.
      *
-     * @default "cypress.config.{ts|js}"
+     * @default "cypress.config.{js,ts,mjs,cjs}"
      */
     configFile: string
     /**

cli/types/cypress.d.ts

@@ -398,7 +398,7 @@ declare namespace Cypress {
 
     // no real way to type without generics
     /**
-     * Returns all environment variables set with CYPRESS_ prefix or in "env" object in "cypress.config.{ts|js}"
+     * Returns all environment variables set with CYPRESS_ prefix or in "env" object in "cypress.config.{js,ts,mjs,cjs}"
      *
      * @see https://on.cypress.io/env
      */
@@ -2855,7 +2855,7 @@ declare namespace Cypress {
     retries: Nullable<number | { runMode?: Nullable<number>, openMode?: Nullable<number> }>
     /**
      * Enables including elements within the shadow DOM when using querying
-     * commands (e.g. cy.get(), cy.find()). Can be set globally in cypress.config.{ts|js},
+     * commands (e.g. cy.get(), cy.find()). Can be set globally in cypress.config.{js,ts,mjs,cjs},
      * per-suite or per-test in the test configuration object, or programmatically
      * with Cypress.config()
      * @default false
@@ -2917,7 +2917,7 @@ declare namespace Cypress {
    */
   interface RuntimeConfigOptions extends Partial<RuntimeServerConfigOptions> {
     /**
-     * Absolute path to the config file (default: <projectRoot>/cypress.config.{ts|js})
+     * Absolute path to the config file (default: <projectRoot>/cypress.config.{js,ts,mjs,cjs})
      */
     configFile: string
     /**
@@ -3041,7 +3041,7 @@ declare namespace Cypress {
   }
 
   /**
-   * Config options that can be assigned on cypress.config.{ts|js} file
+   * Config options that can be assigned on cypress.config.{js,ts,mjs,cjs} file
    */
   type UserConfigOptions<ComponentDevServerOpts = any> = Omit<ResolvedConfigOptions<ComponentDevServerOpts>, 'baseUrl' | 'excludeSpecPattern' | 'supportFile' | 'specPattern' | 'indexHtmlFile'>
 

npm/angular/src/app/assets-image/assets-image.component.cy.ts

@@ -7,7 +7,7 @@ describe('AssetsImageComponent', () => {
   it.skip('should create', () => {
     initEnv(AssetsImageComponent)
     mount(AssetsImageComponent)
-    // add "fileServerFolder": "src" in cypress.config.{ts|js}
+    // add "fileServerFolder": "src" in cypress.config.{js,ts,mjs,cjs}
     cy.get('img#noSlash')
     .should('be.visible')
     .and(($img) => {
@@ -29,7 +29,7 @@ describe('AssetsImageComponent', () => {
   it.skip('should create with AppModule', () => {
     initEnv({ imports: [AppModule] })
     mount(AssetsImageComponent)
-    // add "fileServerFolder": "src" in cypress.config.{ts|js}
+    // add "fileServerFolder": "src" in cypress.config.{js,ts,mjs,cjs}
     cy.get('img#noSlash')
     .should('be.visible')
     .and(($img) => {

npm/angular/src/app/use-custom-element/use-custom-element.component.cy.ts

@@ -1,7 +1,7 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
 import { initEnv, mount } from '@cypress/angular'
 // You have to import your custom element
-// And in cypress.config.{ts|js} activate "includeShadowDom" configuration
+// And in cypress.config.{js,ts,mjs,cjs} activate "includeShadowDom" configuration
 import '../my-custom-element'
 import { UseCustomElementComponent } from './use-custom-element.component'
 

npm/react/cypress/component/viewport.cy.jsx

@@ -1,7 +1,7 @@
 const viewportWidth = 200
 const viewportHeight = 100
 
-describe('cypress.config.{ts|js} viewport',
+describe('cypress.config.{js,ts,mjs,cjs} viewport',
   { viewportWidth, viewportHeight },
   () => {
     it('should have the correct dimensions', () => {

packages/driver/src/cypress/mocha.ts

@@ -146,7 +146,7 @@ const setMochaProps = (specWindow, _mocha) => {
   // to the mocha instance for clarity
   m.Mocha = M
 
-  // this needs to be part of the configuration of cypress.config.{ts|js}
+  // this needs to be part of the configuration of cypress.config.{js,ts,mjs,cjs}
   // we can't just forcibly use bdd
   return ui(specWindow, _mocha)
 }

packages/driver/src/cypress/shadow_dom_utils.ts

@@ -1,6 +1,6 @@
 /**
 * Order of preference for including shadow dom:
-* command-level > programmatic config > test-level > suite-level > cypress.config.{ts|js}
+* command-level > programmatic config > test-level > suite-level > cypress.config.{js,ts,mjs,cjs}
 */
 export const resolveShadowDomInclusion = (Cypress: Cypress.Cypress, commandValue?: boolean): boolean => {
   if (commandValue != null) return commandValue

packages/errors/src/errors.ts

@@ -1183,9 +1183,11 @@ export const AllCypressErrors = {
     return errTemplate`
         There is a ${fmt.highlight(`cypress.json`)} file at the path: ${fmt.path(projectRoot)}
 
-        ${fmt.cypressVersion('10.0.0')} no longer supports cypress.json.
+        ${fmt.cypressVersion('10.0.0')} no longer supports ${fmt.highlight(`cypress.json`)}.
 
-        Please run ${fmt.highlightTertiary('cypress open')} to launch the migration tool to migrate to ${fmt.highlightSecondary('cypress.config.{ts|js}')}.
+        Please run ${fmt.highlightTertiary('cypress open')} to launch the migration tool to migrate to ${fmt.highlightSecondary('cypress.config.{js,ts,mjs,cjs}')}.
+
+        https://on.cypress.io/migration-guide
       `
   },
 

packages/graphql/schemas/schema.graphql

@@ -369,7 +369,7 @@ enum CodeLanguageEnum {
 }
 
 """
-The currently opened Cypress project, represented by a cypress.config.{ts|js} file
+The currently opened Cypress project, represented by a cypress.config.{js,ts,mjs,cjs} file
 """
 type CurrentProject implements Node & ProjectLike {
   """The currently selected browser for the project"""

packages/graphql/src/schemaTypes/objectTypes/gql-CurrentProject.ts

@@ -15,7 +15,7 @@ export const PackageManagerEnum = enumType({
 
 export const CurrentProject = objectType({
   name: 'CurrentProject',
-  description: 'The currently opened Cypress project, represented by a cypress.config.{ts|js} file',
+  description: 'The currently opened Cypress project, represented by a cypress.config.{js,ts,mjs,cjs} file',
   node: 'projectRoot',
   definition (t) {
     t.implements('ProjectLike')

packages/server/lib/config.ts

@@ -586,7 +586,7 @@ export function parseEnv (cfg: Record<string, any>, envCLI: Record<string, any>,
   resolveFrom('env', envProc)
   resolveFrom('cli', envCLI)
 
-  // envCfg is from cypress.config.{ts|js}
+  // envCfg is from cypress.config.{js,ts,mjs,cjs}
   // envFile is from cypress.env.json
   // envProc is from process env vars
   // envCLI is from CLI arguments

packages/server/lib/project-base.ts

@@ -472,7 +472,7 @@ export class ProjectBase<TServer extends Server> extends EE {
     return this._cfg
   }
 
-  // returns project config (user settings + defaults + cypress.config.{ts|js})
+  // returns project config (user settings + defaults + cypress.config.{js,ts,mjs,cjs})
   // with additional object "state" which are transient things like
   // window width and height, DevTools open or not, etc.
   getConfig (): Cfg {

packages/server/lib/server-base.ts

@@ -249,7 +249,7 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     const { morgan, clientRoute, namespace } = config
     const app = express()
 
-    // set the cypress config from the cypress.config.{ts|js} file
+    // set the cypress config from the cypress.config.{js,ts,mjs,cjs} file
     app.set('view engine', 'html')
 
     // since we use absolute paths, configure express-handlebars to not automatically find layouts

packages/server/test/unit/config_spec.js

@@ -159,7 +159,7 @@ describe('lib/config', () => {
       it.skip('validates cypress.config.js', function () {
         this.setup({ reporter: 5 })
 
-        return this.expectValidationFails('cypress.config.{ts|js}')
+        return this.expectValidationFails('cypress.config.{js,ts,mjs,cjs}')
       })
 
       // NOTE: Validated in real use

packages/types/src/server.ts

@@ -65,7 +65,7 @@ export interface OpenProjectLaunchOptions {
   // spec pattern to use when launching from CLI
   spec?: string
 
-  // Callback to reload the Desktop GUI when cypress.config.{ts|js} is changed.
+  // Callback to reload the Desktop GUI when cypress.config.{js,ts,mjs,cjs} is changed.
   onSettingsChanged?: false | (() => void)
   browsers?: FoundBrowser[]
 

system-tests/__snapshots__/config_spec.js

@@ -187,12 +187,14 @@ There is a cypress.json file at the path: /foo/bar/.projects/pristine
 
 Cypress version 10.0.0 no longer supports cypress.json.
 
-Please run cypress open to launch the migration tool to migrate to cypress.config.{ts|js}.
+Please run cypress open to launch the migration tool to migrate to cypress.config.{js,ts,mjs,cjs}.
+
+https://on.cypress.io/migration-guide
 
 
 `
 
-exports['e2e config throws error when cypress.json is found in project and cypress.config.{ts|js} exists as well 1'] = `
+exports['e2e config throws error when cypress.json is found in project and cypress.config.{js,ts,mjs,cjs} exists as well 1'] = `
 There is both a cypress.config.js and a cypress.json file at the location below:
 
 /foo/bar/.projects/multiple-config-files-with-json

system-tests/test/config_spec.js

@@ -104,7 +104,7 @@ describe('e2e config', () => {
     })
   })
 
-  it('throws error when cypress.json is found in project and cypress.config.{ts|js} exists as well', async function () {
+  it('throws error when cypress.json is found in project and cypress.config.{js,ts,mjs,cjs} exists as well', async function () {
     await Fixtures.scaffoldProject('multiple-config-files-with-json')
 
     return systemTests.exec(this, {