feat: support ct/e2e specific overrides in cypress.json (#15526)

Co-authored-by: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>

Author: lmiller1990

cli/schema/cypress.schema.json

@@ -276,6 +276,16 @@
       "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()"
+    },
+    "component": {
+      "type": "object",
+      "default": {},
+      "description": "Any component runner specific overrides"
+    },
+    "e2e": {
+      "type": "object",
+      "default": {},
+      "description": "Any e2e runner specific overrides"
     }
   }
 }

cli/types/cypress.d.ts

@@ -2608,6 +2608,18 @@ declare namespace Cypress {
      * @default false
      */
     includeShadowDom: boolean
+
+    /**
+     * Override default config options for Component Testing runner.
+     * @default {}
+     */
+    component: ResolvedConfigOptions
+
+    /**
+     * Override default config options for E2E Testing runner.
+     * @default {}
+     */
+    e2e: ResolvedConfigOptions
   }
 
   /**
@@ -2732,6 +2744,10 @@ declare namespace Cypress {
     * Absolute path to the root of the project
     */
     projectRoot: string
+    /**
+     * Type of test and associated runner that was launched.
+     */
+    testingType: 'e2e' | 'component'
     /**
      * Cypress version.
      */

npm/create-cypress-tests/__snapshots__/babel.test.ts.js

@@ -4,7 +4,10 @@ const injectDevServer = require('@cypress/react/plugins/babel');
 const something = require("something");
 
 module.exports = (on, config) => {
-  injectDevServer(on, config);
-  return config; // IMPORTANT to return the config object
+  if (config.testingType === "component") {
+    injectDevServer(on, config);
+  }
+
+  return config; // IMPORTANT to return a config
 };
 `

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

@@ -10,8 +10,11 @@ exports['Injected overridden webpack template plugins/index.js'] = `
 const injectDevServer = require("@cypress/react/plugins/react-scripts");
 
 module.exports = (on, config) => {
-  injectDevServer(on, config);
-  return config; // IMPORTANT to return the config object
+  if (config.testingType === "component") {
+    injectDevServer(on, config);
+  }
+
+  return config; // IMPORTANT to return a config
 };
 
 `
@@ -32,8 +35,11 @@ exports['injects guessed next.js template plugins/index.js'] = `
 const injectDevServer = require("@cypress/react/plugins/next");
 
 module.exports = (on, config) => {
-  injectDevServer(on, config);
-  return config; // IMPORTANT to return the config object
+  if (config.testingType === "component") {
+    injectDevServer(on, config);
+  }
+
+  return config; // IMPORTANT to return a config
 };
 
 `

npm/create-cypress-tests/__snapshots__/next.test.ts.js

@@ -4,7 +4,10 @@ const injectDevServer = require('@cypress/react/plugins/next');
 const something = require("something");
 
 module.exports = (on, config) => {
-  injectDevServer(on, config);
-  return config; // IMPORTANT to return the config object
+  if (config.testingType === "component") {
+    injectDevServer(on, config);
+  }
+
+  return config; // IMPORTANT to return a config
 };
 `

npm/create-cypress-tests/__snapshots__/react-scripts.test.ts.js

@@ -4,7 +4,10 @@ const injectDevServer = require('@cypress/react/plugins/react-scripts');
 const something = require("something");
 
 module.exports = (on, config) => {
-  injectDevServer(on, config);
-  return config; // IMPORTANT to return the config object
+  if (config.testingType === "component") {
+    injectDevServer(on, config);
+  }
+
+  return config; // IMPORTANT to return a config
 };
 `

npm/create-cypress-tests/__snapshots__/reactWebpackFile.test.ts.js

@@ -4,10 +4,14 @@ const injectDevServer = require("@cypress/react/plugins/load-webpack");
 const something = require("something");
 
 module.exports = (on, config) => {
-  // TODO replace with valid webpack config path
-  config.env.webpackFilename = './webpack.config.js';
-  injectDevServer(on, config);
-  return config; // IMPORTANT to return the config object
+  if (config.testingType === "component") {
+    injectDevServer(on, config, {
+      // TODO replace with valid webpack config path
+      webpackFileName: './webpack.config.js'
+    });
+  }
+
+  return config; // IMPORTANT to return a config
 };
 `
 
@@ -17,8 +21,12 @@ const injectDevServer = require("@cypress/react/plugins/load-webpack");
 const something = require("something");
 
 module.exports = (on, config) => {
-  config.env.webpackFilename = 'config/webpack.config.js';
-  injectDevServer(on, config);
-  return config; // IMPORTANT to return the config object
+  if (config.testingType === "component") {
+    injectDevServer(on, config, {
+      webpackFileName: 'config/webpack.config.js'
+    });
+  }
+
+  return config; // IMPORTANT to return a config
 };
 `

npm/create-cypress-tests/__snapshots__/rollup.test.ts.js

@@ -8,14 +8,16 @@ const {
 const something = require("something");
 
 module.exports = (on, config) => {
-  on("dev-server:start", async options => {
-    return startDevServer({
-      options,
-      // TODO replace with valid rollup config path
-      rollupConfig: path.resolve(__dirname, 'rollup.config.js')
+  if (config.testingType === "component") {
+    on("dev-server:start", async options => {
+      return startDevServer({
+        options,
+        // TODO replace with valid rollup config path
+        rollupConfig: path.resolve(__dirname, 'rollup.config.js')
+      });
     });
-  });
-  return config; // IMPORTANT to return the config object
+    return config; // IMPORTANT to return the config object
+  }
 };
 `
 
@@ -29,12 +31,14 @@ const {
 const something = require("something");
 
 module.exports = (on, config) => {
-  on("dev-server:start", async options => {
-    return startDevServer({
-      options,
-      rollupConfig: path.resolve(__dirname, 'config/rollup.config.js')
+  if (config.testingType === "component") {
+    on("dev-server:start", async options => {
+      return startDevServer({
+        options,
+        rollupConfig: path.resolve(__dirname, 'config/rollup.config.js')
+      });
     });
-  });
-  return config; // IMPORTANT to return the config object
+    return config; // IMPORTANT to return the config object
+  }
 };
 `

npm/create-cypress-tests/__snapshots__/vite.test.ts.js

@@ -6,8 +6,10 @@ const {
 const something = require("something");
 
 module.exports = (on, config) => {
-  on("dev-server:start", async options => startDevServer({
-    options
-  }));
+  if (config.testingType === "component") {
+    on("dev-server:start", async options => startDevServer({
+      options
+    }));
+  }
 };
 `

npm/create-cypress-tests/__snapshots__/vueCli.test.ts.js

@@ -8,9 +8,11 @@ const webpackConfig = require("@vue/cli-service/webpack.config.js");
 const something = require("something");
 
 module.exports = (on, config) => {
-  on('dev-server:start', options => startDevServer({
-    options,
-    webpackConfig
-  }));
+  if (config.testingType === "component") {
+    on('dev-server:start', options => startDevServer({
+      options,
+      webpackConfig
+    }));
+  }
 };
 `

npm/create-cypress-tests/__snapshots__/vueWebpackFile.test.ts.js

@@ -9,10 +9,12 @@ const webpackConfig = require("./webpack.config.js"); // TODO replace with valid
 const something = require("something");
 
 module.exports = (on, config) => {
-  on('dev-server:start', options => startDevServer({
-    options,
-    webpackConfig
-  }));
+  if (config.testingType === "component") {
+    on('dev-server:start', options => startDevServer({
+      options,
+      webpackConfig
+    }));
+  }
 };
 `
 
@@ -26,9 +28,11 @@ const webpackConfig = require("build/webpack.config.js");
 const something = require("something");
 
 module.exports = (on, config) => {
-  on('dev-server:start', options => startDevServer({
-    options,
-    webpackConfig
-  }));
+  if (config.testingType === "component") {
+    on('dev-server:start', options => startDevServer({
+      options,
+      webpackConfig
+    }));
+  }
 };
 `

npm/create-cypress-tests/__snapshots__/webpackOptions.test.ts.js

@@ -8,31 +8,33 @@ const {
 const something = require("something");
 
 module.exports = (on, config) => {
-  /** @type import("webpack").Configuration */
-  const webpackConfig = {
-    resolve: {
-      extensions: ['.js', '.ts', '.jsx', '.tsx']
-    },
-    mode: 'development',
-    devtool: false,
-    output: {
-      publicPath: '/',
-      chunkFilename: '[name].bundle.js'
-    },
-    // TODO: update with valid configuration for your components
-    module: {
-      rules: [{
-        test: /\\.(js|jsx|mjs|ts|tsx)$/,
-        loader: 'babel-loader',
-        options: {
-          cacheDirectory: path.resolve(__dirname, '.babel-cache')
-        }
-      }]
-    }
-  };
-  on('dev-server:start', options => startDevServer({
-    options,
-    webpackConfig
-  }));
+  if (config.testingType === "component") {
+    /** @type import("webpack").Configuration */
+    const webpackConfig = {
+      resolve: {
+        extensions: ['.js', '.ts', '.jsx', '.tsx']
+      },
+      mode: 'development',
+      devtool: false,
+      output: {
+        publicPath: '/',
+        chunkFilename: '[name].bundle.js'
+      },
+      // TODO: update with valid configuration for your components
+      module: {
+        rules: [{
+          test: /\\.(js|jsx|mjs|ts|tsx)$/,
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: path.resolve(__dirname, '.babel-cache')
+          }
+        }]
+      }
+    };
+    on('dev-server:start', options => startDevServer({
+      options,
+      webpackConfig
+    }));
+  }
 };
 `

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

@@ -6,8 +6,8 @@ describe('babel transform utils', () => {
   context('Plugins config babel plugin', () => {
     it('injects code into the plugins file based on ast', () => {
       const plugin = createTransformPluginsFileBabelPlugin({
-        Require: babel.template.ast('require("something")'),
-        ModuleExportsBody: babel.template.ast('yey()'),
+        RequireAst: babel.template.ast('require("something")'),
+        IfComponentTestingPluginsAst: babel.template.ast('yey()'),
       })
 
       const output = babel.transformSync([
@@ -23,7 +23,10 @@ describe('babel transform utils', () => {
         '',
         'module.exports = (on, config) => {',
         '  on("do");',
-        '  yey();',
+        '',
+        '  if (config.testingType === "component") {',
+        '    yey();',
+        '  }',
         '};',
       ].join(`\n`))
     })

npm/create-cypress-tests/src/component-testing/babel/babelTransform.ts

@@ -3,7 +3,13 @@ import * as fs from 'fs-extra'
 import * as babel from '@babel/core'
 import * as babelTypes from '@babel/types'
 
-export type PluginsConfigAst = Record<'Require' | 'ModuleExportsBody', ReturnType<typeof babel.template.ast>>
+type AST = ReturnType<typeof babel.template.ast>
+
+export type PluginsConfigAst = {
+  RequireAst: AST
+  IfComponentTestingPluginsAst: AST
+  requiresReturnConfig?: true
+}
 
 function tryRequirePrettier () {
   try {
@@ -48,11 +54,13 @@ async function transformFileViaPlugin (filePath: string, babelPlugin: babel.Plug
   }
 }
 
+const returnConfigAst = babel.template.ast('return config; // IMPORTANT to return a config', { preserveComments: true })
+
 export function createTransformPluginsFileBabelPlugin (ast: PluginsConfigAst): babel.PluginObj {
   return {
     visitor: {
       Program: (path) => {
-        path.unshiftContainer('body', ast.Require)
+        path.unshiftContainer('body', ast.RequireAst)
       },
       Function: (path) => {
         if (!babelTypes.isAssignmentExpression(path.parent)) {
@@ -80,7 +88,24 @@ export function createTransformPluginsFileBabelPlugin (ast: PluginsConfigAst): b
             path.parent.right.params.push(babelTypes.identifier('config'))
           }
 
-          path.get('body').pushContainer('body' as never, ast.ModuleExportsBody)
+          const statementToInject = Array.isArray(ast.IfComponentTestingPluginsAst)
+            ? ast.IfComponentTestingPluginsAst
+            : [ast.IfComponentTestingPluginsAst]
+
+          const ifComponentMode = babelTypes.ifStatement(
+            babelTypes.binaryExpression(
+              '===',
+              babelTypes.identifier('config.testingType'),
+              babelTypes.stringLiteral('component'),
+            ),
+            babelTypes.blockStatement(statementToInject as babelTypes.Statement[] | babelTypes.Statement[]),
+          )
+
+          path.get('body').pushContainer('body' as never, ifComponentMode as babel.Node)
+
+          if (ast.requiresReturnConfig) {
+            path.get('body').pushContainer('body' as never, returnConfigAst)
+          }
         }
       },
     },