feat: use supportFile by testingType (#19364)

* feat: use supportFile by testingType

* Fix defaults

* Start renaming files, and updating system-tests

* Fix some tests

* Fix some tests

* Fix more tests

* Try to fix CI

* Fix more tests

* Fix some tests

* Revert changes

* Revert supportFile defaultValue

* Fix some tests

* Fix some tests

* Fix some tests

* Fix some tests

* Update supportFile example

* Update snapshots

* Remove scaffold support

* Handle config errors

* Remove scaffold

* Fix tests

* Fix test

* Update test

* Fix test

* Update supportFile template

* Fix template

.eslintignore

@@ -22,7 +22,8 @@ system-tests/projects/**/static/*
 system-tests/projects/**/*.jsx
 system-tests/projects/**/fail.js
 system-tests/lib/scaffold/plugins/index.js
-system-tests/lib/scaffold/support/index.js
+system-tests/lib/scaffold/support/e2e.js
+system-tests/lib/scaffold/support/component.js
 system-tests/lib/scaffold/support/commands.js
 system-tests/test/support/projects/e2e/cypress/
 system-tests/projects/e2e/cypress/integration/stdout_exit_early_failing_spec.js

circle.yml

@@ -813,6 +813,13 @@ commands:
               rm -rf cypress.json
               echo 'module.exports = {}' > cypress.config.js
             fi
+      - run:
+          name: Rename support file
+          working_directory: /tmp/<<parameters.repo>>
+          command: |
+            if [[ -f cypress/support/index.js ]]; then
+              mv cypress/support/index.js cypress/support/e2e.js
+            fi
       - run:
           name: Print Cypress version
           working_directory: /tmp/<<parameters.repo>>
@@ -1681,7 +1688,7 @@ jobs:
     steps:
       - clone-repo-and-checkout-branch:
           repo: cypress-example-kitchensink
-          pull_request_id: 510
+          pull_request_id: 523
       - install-required-node
       - run:
           name: Remove cypress.json
@@ -1933,6 +1940,10 @@ jobs:
                       },
                     },
                   }" > cypress.config.ts
+      - run:
+          name: Rename support file
+          working_directory: <<parameters.wd>>
+          command: mv cypress/support/index.ts cypress/support/e2e.js
       - run:
           name: Run project tests 🗳
           working_directory: <<parameters.wd>>
@@ -2003,14 +2014,15 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: "electron"
-          pull_request_id: 510
+          pull_request_id: 523
 
   test-binary-against-awesome-typescript-loader:
     <<: *defaults
     steps:
       - test-binary-against-repo:
           repo: cypress-test-awesome-typescript-loader
           browser: "electron"
+          pull_request_id: 7
 
   test-binary-against-kitchensink-firefox:
     <<: *defaults
@@ -2019,7 +2031,7 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: firefox
-          pull_request_id: 510
+          pull_request_id: 523
 
   test-binary-against-kitchensink-chrome:
     <<: *defaults
@@ -2028,7 +2040,7 @@ jobs:
       - test-binary-against-repo:
           repo: cypress-example-kitchensink
           browser: chrome
-          pull_request_id: 510
+          pull_request_id: 523
 
   test-binary-against-todomvc-firefox:
     <<: *defaults
@@ -2120,6 +2132,10 @@ jobs:
           command: |
             rm -rf cypress.json
             echo 'module.exports = {}' > cypress.config.js
+      - run:
+          name: Rename support file
+          working_directory: test-binary
+          command: mv cypress/support/index.js cypress/support/e2e.js
       - run:
           name: Verify Cypress binary
           working_directory: test-binary

cli/schema/cypress.schema.json

@@ -147,7 +147,7 @@
             "string",
             "boolean"
           ],
-          "default": "cypress/support/index.js",
+          "default": "cypress/support/e2e.js",
           "description": "Path to file to load before test files load. This file is compiled and bundled. (Pass false to disable)"
         },
         "videosFolder": {

cli/types/cypress.d.ts

@@ -2742,7 +2742,7 @@ declare namespace Cypress {
     screenshotsFolder: string | false
     /**
      * Path to file to load before test files load. This file is compiled and bundled. (Pass false to disable)
-     * @default "cypress/support/index.js"
+     * @default "cypress/support/{e2e|component}.js"
      */
     supportFile: string | false
     /**
@@ -5476,7 +5476,7 @@ declare namespace Cypress {
     ```
       // likely want to do this in a support file
       // so it's applied to all spec files
-      // cypress/support/index.js
+      // cypress/support/{e2e|component}.js
 
       Cypress.on('uncaught:exception', (err, runnable) => {
         // returning false here prevents Cypress from

npm/angular/README.md

@@ -14,7 +14,7 @@ Ensure you have a version of Cypress > 7.
 Add the following to your support file:
 
 ```js
-// cypress/support/index.js
+// cypress/support/component.js
 // core-js 3.*
 require('core-js/es/reflect');
 // core-js 2.*
@@ -159,7 +159,7 @@ module.exports = {
 - Then add the code below to your supportFile and pluginsFile
 
 ```javascript
-// cypress/support/index.js
+// cypress/support/component.js
 import '@cypress/code-coverage/support';
 // cypress/plugins/index.js
 module.exports = (on, config) => {

npm/angular/cypress.config.ts

@@ -8,6 +8,7 @@ export default defineConfig({
   'projectId': 'nf7zag',
   'component': {
     'specPattern': 'src/app/**/*cy-spec.ts',
+    'supportFile': 'cypress/support/component.ts',
     setupNodeEvents (on, config) {
       return require('./cypress/plugins')(on, config)
     },

npm/create-cypress-tests/__snapshots__/init-component-testing.test.ts.js

@@ -40,6 +40,6 @@ module.exports = (on, config) => {
 
 `
 
-exports['Injected overridden webpack template support/index.js'] = `
+exports['Injected overridden webpack template support/component.js'] = `
 import "./commands.js";
 `

npm/create-cypress-tests/src/component-testing/init-component-testing.test.ts

@@ -71,7 +71,7 @@ describe('init component tests script', () => {
     )
 
     const supportFile = fs.readFileSync(
-      path.join(e2eTestOutputPath, 'cypress', 'support', 'index.js'),
+      path.join(e2eTestOutputPath, 'cypress', 'support', 'component.js'),
       { encoding: 'utf-8' },
     )
 
@@ -81,9 +81,9 @@ describe('init component tests script', () => {
     }
 
     snapshot(
-      `${name} support/index.js`,
+      `${name} support/component.js`,
       fs.readFileSync(
-        path.join(e2eTestOutputPath, 'cypress', 'support', 'index.js'),
+        path.join(e2eTestOutputPath, 'cypress', 'support', 'component.js'),
         { encoding: 'utf-8' },
       ),
     )
@@ -92,7 +92,7 @@ describe('init component tests script', () => {
   it('determines more presumable configuration to suggest', async () => {
     createTempFiles({
       '/cypress.config.ts': 'export default {}',
-      '/cypress/support/index.js': '',
+      '/cypress/support/component.js': '',
       '/cypress/plugins/index.js': 'module.exports = (on, config) => {}',
       // For next.js user will have babel config, but we want to suggest to use the closest config for the application code
       '/babel.config.js': 'module.exports = { }',
@@ -115,7 +115,7 @@ describe('init component tests script', () => {
   it('automatically suggests to the user which config to use', async () => {
     createTempFiles({
       '/cypress.config.ts': 'export default {}',
-      '/cypress/support/index.js': 'import "./commands.js";',
+      '/cypress/support/component.js': 'import "./commands.js";',
       '/cypress/plugins/index.js': 'module.exports = () => {}',
       '/package.json': JSON.stringify({
         dependencies: {

npm/cypress-schematic/src/schematics/ng-add/files/cypress.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   'integrationFolder': '<%= root%>cypress/integration',
-  'supportFile': '<%= root%>cypress/support/index.ts',
+  'supportFile': '<%= root%>cypress/support/component.ts',
   'videosFolder': '<%= root%>cypress/videos',
   'screenshotsFolder': '<%= root%>cypress/screenshots',
   'pluginsFile': '<%= root%>cypress/plugins/index.ts',

npm/cypress-schematic/src/schematics/ng-add/files/cypress/support/index.ts → npm/cypress-schematic/src/schematics/ng-add/files/cypress/support/component.ts

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/component.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and

npm/cypress-schematic/src/schematics/ng-add/index.spec.ts

@@ -32,7 +32,7 @@ describe('@cypress/schematic: ng-add', () => {
   })
 
   it('should create cypress files', async () => {
-    const files = ['cypress/integration/spec.ts', 'cypress/plugins/index.ts', 'cypress/support/commands.ts', 'cypress/support/index.ts', 'cypress/tsconfig.json', 'cypress.config.ts']
+    const files = ['cypress/integration/spec.ts', 'cypress/plugins/index.ts', 'cypress/support/commands.ts', 'cypress/tsconfig.json', 'cypress.config.ts']
     const homePath = '/projects/sandbox/'
 
     return schematicRunner.runSchematicAsync('ng-add', {}, appTree).toPromise().then((tree) => {

npm/react/cypress/support/index.js → npm/react/cypress/support/component.js

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/component.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and

npm/react/examples/craco/cypress/support/component.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your 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/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

npm/react/examples/find-webpack/cypress.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
   'projectId': 'jq5xpp',
   'component': {
     'specPattern': 'src/**/*.spec.{js,ts,jsx,tsx}',
+    'supportFile': 'cypress/support/component.ts',
     devServer (cypressConfig) {
       const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig')
       const { startDevServer } = require('@cypress/webpack-dev-server')

npm/react/examples/react-scripts-typescript/cypress.config.js

@@ -3,6 +3,7 @@ module.exports = {
   'viewportWidth': 500,
   'viewportHeight': 800,
   'component': {
+    'supportFile': 'cypress/support/component.ts',
     'specPattern': 'src/**/*cy-spec.tsx',
     setupNodeEvents (on, config) {
       const devServer = require('@cypress/react/plugins/react-scripts')

npm/react/examples/tailwind/cypress.config.js

@@ -6,7 +6,7 @@ module.exports = {
   'env': {
     'coverage': true,
   },
-  config: {
+  component: {
     'specPattern': 'src/**/*cy-spec.js',
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin

npm/vite-dev-server/cypress.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
   'video': false,
   'fixturesFolder': false,
   'component': {
+    'supportFile': 'cypress/support.js',
     'specPattern': 'cypress/components/**/*.spec.*',
     devServer (cypressConfig) {
       const path = require('path')

npm/vue/cypress.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
   'experimentalFetchPolyfill': true,
   'e2e': {
     'specPattern': 'cypress/integration/**/*',
+    'supportFile': false,
   },
   'component': {
     'specPattern': 'cypress/component/**/*spec.{js,ts,tsx}',

npm/vue/docs/manual-install.md

@@ -19,7 +19,7 @@ module.exports = (on, config) => {
 }
 ```
 
-3. Include the support file from your project's `cypress/support/index.js` file
+3. Include the support file from your project's `cypress/support/component.js` file
 
 ```js
 import '@cypress/vue/dist/support'

npm/vue/examples/code-coverage/README.md

@@ -33,7 +33,7 @@ You should obtain
   `yarn add -D babel-plugin-istanbul @cypress/code-coverage`
 - Add the istanbul plugin to your `babel.config.js`
 - Install `@cypress/code-coverage/task` in `cypress/plugins/index.js`
-- Install `@cypress/code-coverage/support` in `cypress/support/index.js`
+- Install `@cypress/code-coverage/support` in `cypress/support/component.js`
 - Enjoy
 
 **NOTE** Code coverage has been added to the vue-cli example. If you are using `vue-cli`, use the same steps described above to install coverage.

system-tests/projects/config-with-invalid-browser/cypress/support/index.js → npm/webpack-preprocessor/cypress/support/e2e.js

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and

npm/webpack-preprocessor/examples/react-app/cypress.config.js

@@ -1,6 +1,8 @@
 module.exports = {
   'baseUrl': 'http://localhost:3000',
   'fixturesFolder': false,
-  'supportFile': false,
   'viewportWidth': 600,
+  'e2e': {
+    'supportFile': false,
+  },
 }

npm/webpack-preprocessor/examples/use-babelrc/cypress.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   'fixturesFolder': false,
-  'supportFile': false,
   'e2e': {
+    'supportFile': false,
     'specPattern': 'cypress/integration/**/*',
     setupNodeEvents (on, config) {
       const webpackPreprocessor = require('../..')

npm/webpack-preprocessor/examples/use-ts-loader/cypress.config.ts

@@ -2,8 +2,8 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   'fixturesFolder': false,
-  'supportFile': false,
   'e2e': {
+    'supportFile': false,
     async setupNodeEvents (on, config) {
       const webpackPreprocessor = await import('../..')
 

packages/app/cypress/component/support/index.ts

@@ -1,6 +1,6 @@
 import { registerMountFn } from '@packages/frontend-shared/cypress/support/common'
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/index.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and

packages/config/__snapshots__/index_spec.js

@@ -57,7 +57,7 @@ exports['src/index .getDefaultValues returns list of public config keys 1'] = {
   "screenshotsFolder": "cypress/screenshots",
   "slowTestThreshold": 10000,
   "scrollBehavior": "top",
-  "supportFile": "cypress/support",
+  "supportFile": "cypress/support/e2e.js",
   "supportFolder": false,
   "taskTimeout": 60000,
   "trashAssetsBeforeRuns": true,