feat: Use .config files (#18578)

Co-authored-by: Tim Griesser <tgriesser10@gmail.com>

Author: estrada9166

circle.yml

@@ -516,20 +516,34 @@ commands:
     steps:
       - run: yarn verify:mocha:results <<parameters.expectedResultCount>>
 
-  clone-repo-and-checkout-release-branch:
+  clone-repo-and-checkout-branch:
     description: |
       Clones an external repo and then checks out the branch that matches the next version otherwise uses 'master' branch.
     parameters:
       repo:
         description: "Name of the github repo to clone like: cypress-example-kitchensink"
         type: string
+      pull_request_id:
+        description: Pull request number to check out before installing and testing
+        type: integer
+        default: 0
     steps:
       - restore_cached_binary
       - run:
           name: "Cloning test project: <<parameters.repo>>"
           command: |
             git clone --depth 1 --no-single-branch https://github.com/cypress-io/<<parameters.repo>>.git /tmp/<<parameters.repo>>
             cd /tmp/<<parameters.repo>> && (git checkout $(node ./scripts/get-next-version) || true)
+      - when:
+            condition: <<parameters.pull_request_id>>
+            steps:
+              - run:
+                  name: Check out PR <<parameters.pull_request_id>>
+                  working_directory: /tmp/<<parameters.repo>>
+                  command: |
+                    git fetch origin pull/<<parameters.pull_request_id>>/head:pr-<<parameters.pull_request_id>>
+                    git checkout pr-<<parameters.pull_request_id>>
+                    git log -n 2
 
   test-binary-against-rwa:
     description: |
@@ -571,7 +585,7 @@ commands:
         type: string
         default: "CI=true yarn start"
     steps:
-      - clone-repo-and-checkout-release-branch:
+      - clone-repo-and-checkout-branch:
           repo: <<parameters.repo>>
       - when:
           condition: <<parameters.pull_request_id>>
@@ -701,18 +715,9 @@ commands:
         type: string
         default: "npm start --if-present"
     steps:
-      - clone-repo-and-checkout-release-branch:
+      - clone-repo-and-checkout-branch:
           repo: <<parameters.repo>>
-      - when:
-          condition: <<parameters.pull_request_id>>
-          steps:
-            - run:
-                name: Check out PR <<parameters.pull_request_id>>
-                working_directory: /tmp/<<parameters.repo>>
-                command: |
-                  git fetch origin pull/<<parameters.pull_request_id>>/head:pr-<<parameters.pull_request_id>>
-                  git checkout pr-<<parameters.pull_request_id>>
-                  git log -n 2
+          pull_request_id: <<parameters.pull_request_id>>
       - run:
           # Install deps + Cypress binary with yarn if yarn.lock present
           command: |
@@ -724,6 +729,16 @@ commands:
               CYPRESS_INSTALL_BINARY=~/cypress/cypress.zip npm install ~/cypress/cypress.tgz
             fi
           working_directory: /tmp/<<parameters.repo>>
+      - run:
+          name: Scaffold new config file
+          working_directory: /tmp/<<parameters.repo>>
+          environment:
+            CYPRESS_INTERNAL_FORCE_SCAFFOLD: "1"
+          command: |
+            if [[ -f cypress.json ]]; then
+              rm -rf cypress.json
+              echo 'module.exports = {}' > cypress.config.js
+            fi
       - run:
           name: Print Cypress version
           working_directory: /tmp/<<parameters.repo>>
@@ -1610,9 +1625,17 @@ jobs:
   test-kitchensink:
     <<: *defaults
     steps:
-      - clone-repo-and-checkout-release-branch:
+      - clone-repo-and-checkout-branch:
           repo: cypress-example-kitchensink
+          pull_request_id: 510
       - install-required-node
+      - run:
+          name: Remove cypress.json
+          description: Remove cypress.json in case it exists
+          working_directory: /tmp/cypress-example-kitchensink
+          environment:
+            CYPRESS_INTERNAL_FORCE_SCAFFOLD: "1"
+          command: rm -rf cypress.json
       - run:
           name: Install prod dependencies
           command: yarn --production
@@ -1637,7 +1660,7 @@ jobs:
     <<: *defaults
     resource_class: medium
     steps:
-      - clone-repo-and-checkout-release-branch:
+      - clone-repo-and-checkout-branch:
           repo: cypress-example-kitchensink
       - run:
           name: Install prod dependencies
@@ -1662,7 +1685,7 @@ jobs:
     <<: *defaults
     resource_class: medium
     steps:
-      - clone-repo-and-checkout-release-branch:
+      - clone-repo-and-checkout-branch:
           repo: cypress-test-tiny
       - run:
           name: Run test project
@@ -1846,7 +1869,7 @@ jobs:
           environment:
             CYPRESS_INTERNAL_FORCE_SCAFFOLD: "1"
           command: |
-            echo '{}' > cypress.json
+            echo 'module.exports = {}' > cypress.config.js
             npx cypress run
 
   test-full-typescript-project:
@@ -1878,6 +1901,14 @@ jobs:
           name: Scaffold full TypeScript project 🏗
           working_directory: <<parameters.wd>>
           command: npx @bahmutov/cly@1 init --typescript
+      - run:
+          name: Scaffold new config file
+          working_directory: <<parameters.wd>>
+          environment:
+            CYPRESS_INTERNAL_FORCE_SCAFFOLD: "1"
+          command: |
+            rm -rf cypress.json
+            echo 'export default {}' > cypress.config.ts
       - run:
           name: Run project tests 🗳
           working_directory: <<parameters.wd>>
@@ -1888,7 +1919,7 @@ jobs:
     <<: *defaults
     steps:
       - restore_workspace_binaries
-      - clone-repo-and-checkout-release-branch:
+      - clone-repo-and-checkout-branch:
           repo: cypress-test-tiny
       - run:
           name: Install Cypress
@@ -1940,6 +1971,7 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: "electron"
+          pull_request_id: 510
 
   test-binary-against-awesome-typescript-loader:
     <<: *defaults
@@ -1955,6 +1987,7 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: firefox
+          pull_request_id: 510
 
   "test-binary-against-kitchensink-chrome":
     <<: *defaults
@@ -1963,6 +1996,7 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: chrome
+          pull_request_id: 510
 
   "test-binary-against-todomvc-firefox":
     <<: *defaults
@@ -2056,6 +2090,14 @@ jobs:
           name: Add Cypress demo
           working_directory: test-binary
           command: npx @bahmutov/cly init
+      - run:
+          name: Scaffold new config file
+          working_directory: test-binary
+          environment:
+            CYPRESS_INTERNAL_FORCE_SCAFFOLD: "1"
+          command: |
+            rm -rf cypress.json
+            echo 'module.exports = {}' > cypress.config.js
       - run:
           name: Verify Cypress binary
           working_directory: test-binary

cli/__snapshots__/cli_spec.js

@@ -21,19 +21,21 @@ 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.json.
+                                     cypress.config.{ts|js}.
     -C, --config-file <config-file>  path to JSON file where configuration values
-                                     are set. defaults to "cypress.json". pass
-                                     "false" to disable.
+                                     are set. defaults to
+                                     "cypress.config.{ts|js}". pass "false" to
+                                     disable.
     -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.json or cypress.env.json
+                                     value in cypress.config.{ts|js} 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.json.
+                                     any value in cypress.config.{ts|js}.
     -P, --project <project-path>     path to the project
     --dev                            runs cypress in development and bypasses
                                      binary check
@@ -67,17 +69,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.json.
-    -C, --config-file <config-file>            path to JSON file where configuration values are set. defaults to "cypress.json". pass "false" to disable.
+    -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 JSON file where configuration values are set. defaults to "cypress.config.{ts|js}". pass "false" to disable.
     --e2e                                      runs end to end tests
-    -e, --env <env>                            sets environment variables. separate multiple values with a comma. overrides any value in cypress.json or cypress.env.json
+    -e, --env <env>                            sets environment variables. separate multiple values with a comma. overrides any value in cypress.config.{ts|js} 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.json.
+    -p, --port <port>                          runs Cypress on a specific port. overrides any value in cypress.config.{ts|js}.
     -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

@@ -107,12 +107,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.json.',
-  configFile: 'path to JSON file where configuration values are set. defaults to "cypress.json". pass "false" to disable.',
+  config: 'sets configuration values. separate multiple values with a comma. overrides any value in cypress.config.{ts|js}.',
+  configFile: 'path to JSON file where configuration values are set. defaults to "cypress.config.{ts|js}". pass "false" to disable.',
   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.json or cypress.env.json',
+  env: 'sets environment variables. separate multiple values with a comma. overrides any value in cypress.config.{ts|js} 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',
@@ -121,7 +121,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.json.',
+  port: 'runs Cypress on a specific port. overrides any value in cypress.config.{ts|js}.',
   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/schema/cypress.schema.json

@@ -282,7 +282,7 @@
         "includeShadowDom": {
           "type": "boolean",
           "default": false,
-          "description": "Enables including elements within the shadow DOM when using querying commands (e.g. cy.get(), cy.find()). Can be set globally in cypress.json, per-suite or per-test in the test configuration object, or programmatically with Cypress.config()"
+          "description": "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}, per-suite or per-test in the test configuration object, or programmatically with Cypress.config()"
         },
         "clientCertificates": {
           "description": "Defines client certificates to use when sending requests to the specified URLs",

cli/test/lib/cypress_spec.js

@@ -234,12 +234,12 @@ describe('cypress', function () {
         })
       })
 
-      it('coerces --config-file cypress.json to string', async () => {
-        const args = 'cypress run --config-file cypress.json'.split(' ')
+      it('coerces --config-file cypress.config.js to string', async () => {
+        const args = 'cypress run --config-file cypress.config.js'.split(' ')
         const options = await cypress.cli.parseRunArguments(args)
 
         expect(options).to.deep.equal({
-          configFile: 'cypress.json',
+          configFile: 'cypress.config.js',
         })
       })
 

cli/test/lib/exec/open_spec.js

@@ -66,10 +66,10 @@ describe('exec open', function () {
     })
 
     it('spawns with --config-file set', function () {
-      return open.start({ configFile: 'special-cypress.json' })
+      return open.start({ configFile: 'special-cypress.config.js' })
       .then(() => {
         expect(spawn.start).to.be.calledWith(
-          ['--config-file', 'special-cypress.json'],
+          ['--config-file', 'special-cypress.config.js'],
         )
       })
     })

cli/test/lib/exec/run_spec.js

@@ -150,10 +150,10 @@ describe('exec run', function () {
     })
 
     it('spawns with --config-file set', function () {
-      return run.start({ configFile: 'special-cypress.json' })
+      return run.start({ configFile: 'special-cypress.config.js' })
       .then(() => {
         expect(spawn.start).to.be.calledWith(
-          ['--run-project', process.cwd(), '--config-file', 'special-cypress.json'],
+          ['--run-project', process.cwd(), '--config-file', 'special-cypress.config.js'],
         )
       })
     })

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

@@ -144,7 +144,7 @@ declare namespace CypressCommandLine {
      *
      * If `false` is passed, no config file will be used.
      *
-     * @default "cypress.json"
+     * @default "cypress.config.{ts|js}"
      */
     configFile: string | false
     /**

cli/types/cypress.d.ts

@@ -353,7 +353,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.json"
+     * Returns all environment variables set with CYPRESS_ prefix or in "env" object in "cypress.config.{ts|js}"
      *
      * @see https://on.cypress.io/env
      */
@@ -362,7 +362,7 @@ declare namespace Cypress {
      * Returns specific environment variable or undefined
      * @see https://on.cypress.io/env
      * @example
-     *    // cypress.json
+     *    // cypress.config.js
      *    { "env": { "foo": "bar" } }
      *    Cypress.env("foo") // => bar
      */
@@ -2756,7 +2756,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.json,
+     * commands (e.g. cy.get(), cy.find()). Can be set globally in cypress.config.{ts|js},
      * per-suite or per-test in the test configuration object, or programmatically
      * with Cypress.config()
      * @default false
@@ -2894,7 +2894,7 @@ declare namespace Cypress {
 
   interface PluginConfigOptions extends ResolvedConfigOptions {
     /**
-    * Absolute path to the config file (default: <projectRoot>/cypress.json) or false
+    * Absolute path to the config file (default: <projectRoot>/cypress.config.{ts|js}) or false
     */
     configFile: string | false
     /**

npm/angular/README.md

@@ -22,10 +22,10 @@ require('core-js/es7/reflect');
 require('@cypress/angular/support');
 ```
 
-Enable component testing in `cypress.json`.
+Enable component testing in `cypress.config.js`.
 
-```json
-{
+```js
+module.exports = {
   "component": {
     "componentFolder": "src/app",
     "testFiles": "**/*cy-spec.ts"

npm/angular/cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  'experimentalFetchPolyfill': true,
+  'fixturesFolder': false,
+  'includeShadowDom': true,
+  'fileServerFolder': 'src',
+  'projectId': 'nf7zag',
+  'component': {
+    'componentFolder': 'src/app',
+    'testFiles': '**/*cy-spec.ts',
+  },
+})