feat: Use plugins on config files (#18798)

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

circle.yml

@@ -1032,6 +1032,8 @@ jobs:
             runner-integration-tests-chrome,
             runner-ct-integration-tests-chrome,
             reporter-integration-tests,
+            run-app-integration-tests-chrome,
+            run-launchpad-integration-tests-chrome
       - run: yarn percy build:finalize
 
   cli-visual-tests:
@@ -1914,7 +1916,21 @@ jobs:
             CYPRESS_INTERNAL_FORCE_SCAFFOLD: "1"
           command: |
             rm -rf cypress.json
-            echo 'export default {}' > cypress.config.ts
+            echo "export default {
+                    e2e: {
+                      setupNodeEvents (on, config) {
+                        on('task', {
+                          log (x) {
+                            console.log(x)
+
+                            return null
+                          },
+                        })
+
+                        return config
+                      },
+                    },
+                  }" > cypress.config.ts
       - run:
           name: Run project tests 🗳
           working_directory: <<parameters.wd>>

cli/test/spec_helper.js

@@ -6,6 +6,7 @@ const mockfs = require('mock-fs')
 const Promise = require('bluebird')
 const util = require('../lib/util')
 const { MockChildProcess } = require('spawn-mock')
+
 const _kill = MockChildProcess.prototype.kill
 
 const patchMockSpawn = () => {

cli/types/cypress.d.ts

@@ -2813,6 +2813,11 @@ declare namespace Cypress {
      * An array of objects defining the certificates
      */
     clientCertificates: ClientCertificate[]
+
+     /**
+     * Handle Cypress plugins
+     */
+    setupNodeEvents: (on: PluginEvents, config: PluginConfigOptions) => Promise<PluginConfigOptions> | PluginConfigOptions
   }
 
   /**

npm/angular/cypress.config.ts

@@ -9,5 +9,6 @@ export default defineConfig({
   'component': {
     'componentFolder': 'src/app',
     'testFiles': '**/*cy-spec.ts',
+    'setupNodeEvents': require('./cypress/plugins'),
   },
 })

npm/design-system/cypress.config.js

@@ -13,4 +13,13 @@ module.exports = {
   ],
   componentFolder: 'src',
   fixturesFolder: false,
+  component: {
+    setupNodeEvents (on, config) {
+      const { startDevServer } = require('@cypress/vite-dev-server')
+
+      on('dev-server:start', (options) => startDevServer({ options }))
+
+      return config
+    },
+  },
 }

npm/react/cypress.config.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 module.exports = {
   'viewportWidth': 400,
   'viewportHeight': 400,
@@ -12,4 +14,70 @@ module.exports = {
     '**/__image_snapshots__/*',
   ],
   'experimentalFetchPolyfill': true,
+  'component': {
+    setupNodeEvents (on, config) {
+      const { startDevServer } = require('@cypress/webpack-dev-server')
+      const path = require('path')
+      const babelConfig = require('./babel.config.js')
+
+      const webpackConfig = {
+        resolve: {
+          extensions: ['.js', '.ts', '.jsx', '.tsx'],
+        },
+        mode: 'development',
+        devtool: false,
+        output: {
+          publicPath: '/',
+          chunkFilename: '[name].bundle.js',
+        },
+        module: {
+          rules: [
+            {
+              test: /\.(js|jsx|mjs|ts|tsx)$/,
+              loader: 'babel-loader',
+              options: { ...babelConfig, cacheDirectory: path.resolve(__dirname, '..', '..', '.babel-cache') },
+            },
+            {
+              test: /\.modules\.css$/i,
+              exclude: [/node_modules/],
+              use: [
+                'style-loader',
+                {
+                  loader: 'css-loader',
+                  options: {
+                    modules: true,
+                  },
+                },
+              ],
+            },
+            {
+              test: /\.css$/,
+              exclude: [/node_modules/, /\.modules\.css$/i],
+              use: ['style-loader', 'css-loader'],
+            },
+            {
+              // some of our examples import SVG
+              test: /\.svg$/,
+              loader: 'svg-url-loader',
+            },
+            {
+              // some of our examples import SVG
+              test: /\.svg$/,
+              loader: 'svg-url-loader',
+            },
+            {
+              test: /\.(png|jpg)$/,
+              use: ['file-loader'],
+            },
+          ],
+        },
+      }
+
+      on('dev-server:start', (options) => {
+        return startDevServer({ options, webpackConfig, disableLazyCompilation: false })
+      })
+
+      return config
+    },
+  },
 }

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

@@ -4,4 +4,17 @@ module.exports = {
   'testFiles': '**/*spec.js',
   'viewportWidth': 500,
   'viewportHeight': 500,
+  'component': {
+    setupNodeEvents (on, config) {
+      // load file devServer that comes with this plugin
+      // https://github.com/bahmutov/cypress-react-unit-test#install
+      const devServer = require('@cypress/react/plugins/react-scripts')
+
+      devServer(on, config)
+
+      // IMPORTANT to return the config object
+      // with the any changed environment variables
+      return config
+    },
+  },
 }

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

@@ -2,5 +2,13 @@ module.exports = {
   'component': {
     'testFiles': '**/*.test.{js,ts,jsx,tsx}',
     'componentFolder': 'src',
+    setupNodeEvents (on, config) {
+      const cracoConfig = require('./craco.config.js')
+      const devServer = require('@cypress/react/plugins/craco')
+
+      devServer(on, config, cracoConfig)
+
+      return config
+    },
   },
 }

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

@@ -6,6 +6,30 @@ export default defineConfig({
   'component': {
     'testFiles': '**/*.spec.{js,ts,jsx,tsx}',
     'componentFolder': 'src',
+    setupNodeEvents (on, config) {
+      const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig')
+      const { startDevServer } = require('@cypress/webpack-dev-server')
+      const _ = require('lodash')
+
+      const map = _.map([4, 8], (n) => n * 2)
+
+      console.log(map)
+      require('@cypress/code-coverage/task')(on, config)
+      const webpackConfig = findReactScriptsWebpackConfig(config)
+
+      const rules = webpackConfig.module.rules.find((rule) => !!rule.oneOf).oneOf
+      const babelRule = rules.find((rule) => typeof rule.loader === 'string' && /babel-loader/.test(rule.loader))
+
+      typeof babelRule.options !== 'string' && babelRule.options.plugins.push(require.resolve('babel-plugin-istanbul'))
+
+      on('dev-server:start', (options) => {
+        return startDevServer({ options, webpackConfig })
+      })
+
+      // IMPORTANT to return the config object
+      // with the any changed environment variables
+      return config
+    },
   },
   'env': {
     'cypress-react-selector': {

npm/react/examples/nextjs-webpack-5/cypress.config.js

@@ -5,4 +5,13 @@ module.exports = {
   'viewportHeight': 800,
   'componentFolder': 'cypress/components',
   'pluginsFile': 'cypress/plugins.js',
+  'component': {
+    setupNodeEvents (on, config) {
+      const devServer = require('@cypress/react/plugins/next')
+
+      devServer(on, config)
+
+      return config
+    },
+  },
 }

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

@@ -8,4 +8,13 @@ module.exports = {
   'env': {
     'coverage': true,
   },
+  'component': {
+    setupNodeEvents (on, config) {
+      const devServer = require('@cypress/react/plugins/next')
+
+      devServer(on, config)
+
+      return config
+    },
+  },
 }