feat: add devServer to config file

npm/angular/cypress.config.ts

@@ -10,5 +10,14 @@ export default defineConfig({
     'componentFolder': 'src/app',
     'testFiles': '**/*cy-spec.ts',
     'setupNodeEvents': require('./cypress/plugins'),
+    devServer (cypressConfig) {
+      const { startDevServer } = require('@cypress/webpack-dev-server')
+      const webpackConfig = require('./cypress/plugins/webpack.config')
+
+      return startDevServer({
+        options: cypressConfig,
+        webpackConfig,
+      })
+    },
   },
 })

npm/angular/cypress/plugins/index.ts

@@ -1,16 +1,7 @@
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin'
-import * as webpackConfig from './webpack.config'
 
 module.exports = (on, config) => {
   addMatchImageSnapshotPlugin(on, config)
-  const { startDevServer } = require('@cypress/webpack-dev-server')
-
-  on('dev-server:start', (options) => {
-    return startDevServer({
-      options,
-      webpackConfig,
-    })
-  })
 
   require('@cypress/code-coverage/task')(on, config)
 

npm/design-system/cypress.config.js

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

npm/react/cypress.config.js

@@ -15,7 +15,7 @@ module.exports = {
   ],
   'experimentalFetchPolyfill': true,
   'component': {
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const path = require('path')
       const babelConfig = require('./babel.config.js')
@@ -73,11 +73,7 @@ module.exports = {
         },
       }
 
-      on('dev-server:start', (options) => {
-        return startDevServer({ options, webpackConfig, disableLazyCompilation: false })
-      })
-
-      return config
+      return startDevServer({ options: cypressConfig, disableLazyCompilation: false, webpackConfig })
     },
   },
 }

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

@@ -6,25 +6,25 @@ export default defineConfig({
   'component': {
     'testFiles': '**/*.spec.{js,ts,jsx,tsx}',
     'componentFolder': 'src',
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig) {
       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 webpackConfig = findReactScriptsWebpackConfig(cypressConfig.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 })
-      })
+      return startDevServer({ options: cypressConfig, webpackConfig })
+    },
+    setupNodeEvents (on, config) {
+      require('@cypress/code-coverage/task')(on, config)
 
       // IMPORTANT to return the config object
       // with the any changed environment variables

npm/react/examples/webpack-options/cypress.config.js

@@ -5,7 +5,7 @@ module.exports = {
   'viewportWidth': 500,
   'viewportHeight': 500,
   'component': {
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig) {
       const path = require('path')
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const babelConfig = require('./babel.config')
@@ -34,10 +34,8 @@ module.exports = {
       }
 
       process.env.BABEL_ENV = 'test' // this is required to load commonjs babel plugin
-      on('dev-server:start', (options) => startDevServer({ options, webpackConfig }))
 
-      // if adding code coverage, important to return updated config
-      return config
+      return startDevServer({ options: cypressConfig, webpackConfig })
     },
   },
 }

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

@@ -7,20 +7,16 @@ export default defineConfig({
   'testFiles': '**/*.spec.*',
   'componentFolder': 'cypress/components',
   'component': {
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig) {
       const path = require('path')
       const { startDevServer } = require('./dist')
 
-      on('dev-server:start', async (options) => {
-        return startDevServer({
-          options,
-          viteConfig: {
-            configFile: path.resolve(__dirname, 'vite.config.ts'),
-          },
-        })
+      return startDevServer({
+        options: cypressConfig,
+        viteConfig: {
+          configFile: path.resolve(__dirname, 'vite.config.ts'),
+        },
       })
-
-      return config
     },
   },
 })

npm/vue/cypress.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   'testFiles': '**/*spec.{js,ts,tsx}',
   'experimentalFetchPolyfill': true,
   'component': {
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('./webpack.config')
 
@@ -22,8 +22,10 @@ export default defineConfig({
         '@vue/compiler-core$': '@vue/compiler-core/dist/compiler-core.cjs.js',
       }
 
+      return startDevServer({ options: cypressConfig, webpackConfig })
+    },
+    setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)
-      on('dev-server:start', (options) => startDevServer({ options, webpackConfig }))
 
       return config
     },

npm/vue/examples/code-coverage/cypress.config.js

@@ -4,17 +4,16 @@ module.exports = {
   'testFiles': '**/*.spec.js',
   'video': false,
   'component': {
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('./webpack.config')
 
-      on('dev-server:start', (options) => {
-        return startDevServer({
-          options,
-          webpackConfig,
-        })
+      return startDevServer({
+        options: cypressConfig,
+        webpackConfig,
       })
-
+    },
+    setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)
 
       return config

npm/vue/examples/vue-cli/cypress.config.js

@@ -4,29 +4,28 @@ module.exports = {
   'testFiles': '**/*spec.js',
   'componentFolder': 'src',
   'component': {
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('@vue/cli-service/webpack.config')
 
-      on('dev-server:start', (options) => {
-        // HtmlPwaPlugin is coupled to a hook in HtmlWebpackPlugin
-        // that was deprecated after 3.x. We currently only support
-        // HtmlWebpackPlugin 4.x and 5.x.
-        // TODO: Figure out how to deal with 2 major versions old HtmlWebpackPlugin
-        // which is still in widespread usage.
-        const modifiedWebpackConfig = {
-          ...webpackConfig,
-          plugins: (webpackConfig.plugins || []).filter((x) => {
-            return x.constructor.name !== 'HtmlPwaPlugin'
-          }),
-        }
+      // HtmlPwaPlugin is coupled to a hook in HtmlWebpackPlugin
+      // that was deprecated after 3.x. We currently only support
+      // HtmlWebpackPlugin 4.x and 5.x.
+      // TODO: Figure out how to deal with 2 major versions old HtmlWebpackPlugin
+      // which is still in widespread usage.
+      const modifiedWebpackConfig = {
+        ...webpackConfig,
+        plugins: (webpackConfig.plugins || []).filter((x) => {
+          return x.constructor.name !== 'HtmlPwaPlugin'
+        }),
+      }
 
-        return startDevServer({
-          options,
-          webpackConfig: modifiedWebpackConfig,
-        })
+      return startDevServer({
+        options: cypressConfig,
+        webpackConfig: modifiedWebpackConfig,
       })
-
+    },
+    setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)
 
       return config

packages/app/cypress.config.ts

@@ -20,28 +20,24 @@ export default defineConfig({
   'component': {
     'testFiles': '**/*.{spec,cy}.{js,ts,tsx,jsx}',
     'supportFile': 'cypress/component/support/index.ts',
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/vite-dev-server')
 
-      on('dev-server:start', async (options) => {
-        return startDevServer({
-          options,
-          viteConfig: {
-            // TODO(tim): Figure out why this isn't being picked up
-            optimizeDeps: {
-              include: [
-                '@headlessui/vue',
-                'vue3-file-selector',
-                'just-my-luck',
-                'combine-properties',
-                'faker',
-              ],
-            },
-          },
-        })
-      })
-
-      return config
+      return startDevServer({ options: cypressConfig, ...devServerConfig })
+    },
+    devServerConfig: {
+      viteConfig: {
+        // TODO(tim): Figure out why this isn't being picked up
+        optimizeDeps: {
+          include: [
+            '@headlessui/vue',
+            'vue3-file-selector',
+            'just-my-luck',
+            'combine-properties',
+            'faker',
+          ],
+        },
+      },
     },
   },
   'e2e': {

packages/data-context/src/sources/WizardDataSource.ts

@@ -267,14 +267,12 @@ const getFrameworkConfigFile = (opts: GetCodeOptsCt) => {
         const { getWebpackConfig } = require('nuxt')
 
         module.exports = {
-          component (on, config) {
-            on('dev-server:start', async (options) => {
-              let webpackConfig = await getWebpackConfig('modern', 'dev')
+          async devServer (cypressConfig, devServerConfig) {
+            let webpackConfig = await getWebpackConfig('modern', 'dev')
 
-              return startDevServer({
-                options,
-                webpackConfig,
-              })
+            return startDevServer({
+              options,
+              webpackConfig,
             })
           },
         }

packages/desktop-gui/cypress.config.js

@@ -32,16 +32,11 @@ module.exports = {
     },
   },
   'component': {
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
-
       const webpackConfig = require('./webpack.config').default
 
-      on('dev-server:start', (options) => {
-        return startDevServer({ options, webpackConfig })
-      })
-
-      return config
+      return startDevServer({ options: cypressConfig, webpackConfig })
     },
   },
 }

packages/frontend-shared/cypress.config.ts

@@ -18,33 +18,13 @@ export default defineConfig({
   'componentFolder': 'src',
   'component': {
     'testFiles': '**/*.spec.{js,ts,tsx,jsx}',
-    setupNodeEvents (on, config) {
+    devServer (cypressConfig) {
       const { startDevServer } = require('@cypress/vite-dev-server')
 
-      // `on` is used to hook into various events Cypress emits
-      // `config` is the resolved Cypress config
-
-      if (config.testingType === 'component') {
-        on('dev-server:start', async (options) => {
-          return startDevServer({
-            options,
-            viteConfig: {
-              // TODO(tim): Figure out why this isn't being picked up
-              optimizeDeps: {
-                include: [
-                  '@headlessui/vue',
-                  'vue3-file-selector',
-                  'just-my-luck',
-                  'combine-properties',
-                  'faker',
-                ],
-              },
-            },
-          })
-        })
-      }
-
-      return config // IMPORTANT to return a config
+      return startDevServer({
+        options: cypressConfig,
+        viteConfig: require('./vite.config'),
+      })
     },
   },
   'e2e': {