fix: allow cypress config.port to override devServer.port for proxying assets

npm/vite-dev-server/src/resolveConfig.ts

@@ -65,6 +65,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
 function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): InlineConfig {
   const {
     cypressConfig: {
+      port,
       projectRoot,
       devServerPublicPathRoute,
       supportFile,
@@ -74,6 +75,8 @@ function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): Inline
     specs,
   } = config
 
+  const vitePort = port ?? undefined
+
   // Vite caches its output in the .vite directory in the node_modules where vite lives.
   // So we want to find that node_modules path and ensure it's added to the "allow" list
   const vitePathNodeModules = path.dirname(path.dirname(require.resolve(`vite/package.json`, {
@@ -122,6 +125,7 @@ function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): Inline
           vite.searchForWorkspaceRoot?.(process.cwd()),
         ],
       },
+      port: vitePort,
       host: '127.0.0.1',
       // Disable file watching and HMR when executing tests in `run` mode
       ...(isTextTerminal

npm/webpack-dev-server/src/devServer.ts

@@ -64,8 +64,11 @@ export function devServer (devServerConfig: WebpackDevServerConfig): Promise<Cyp
   return new Promise(async (resolve, reject) => {
     const result = await devServer.create(devServerConfig) as DevServerCreateResult
 
+    // @ts-expect-error
+    const { port } = result.server?.options
+
     if (result.version === 3) {
-      const srv = result.server.listen(0, '127.0.0.1', () => {
+      const srv = result.server.listen(port || 0, '127.0.0.1', () => {
         const port = (srv.address() as AddressInfo).port
 
         debug('Component testing webpack server 3 started on port %s', port)

npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts

@@ -17,6 +17,7 @@ export function makeCypressWebpackConfig (
   const {
     devServerConfig: {
       cypressConfig: {
+        port,
         projectRoot,
         devServerPublicPathRoute,
         supportFile,
@@ -43,6 +44,8 @@ export function makeCypressWebpackConfig (
     },
   } = config
 
+  const webpackDevServerPort = port ?? undefined
+
   debug(`Using HtmlWebpackPlugin version ${htmlWebpackPluginVersion} from ${htmlWebpackPluginImportPath}`)
 
   const optimization: Record<string, any> = {
@@ -106,6 +109,7 @@ export function makeCypressWebpackConfig (
     return {
       ...finalConfig,
       devServer: {
+        port: webpackDevServerPort,
         client: {
           overlay: false,
         },
@@ -117,6 +121,7 @@ export function makeCypressWebpackConfig (
   return {
     ...finalConfig,
     devServer: {
+      port: webpackDevServerPort,
       overlay: false,
     },
   }

packages/data-context/src/data/ProjectLifecycleManager.ts

@@ -240,6 +240,11 @@ export class ProjectLifecycleManager {
 
           const devServerOptions = await this.ctx._apis.projectApi.getDevServer().start({ specs: this.ctx.project.specs, config: finalConfig })
 
+          // if we received a cypressConfig.port we want to null it out
+          // because we propagated it into the devServer.port and it is
+          // later set as baseUrl which cypress is launched into
+          finalConfig.port = null
+
           span?.end()
 
           if (!devServerOptions?.port) {

system-tests/lib/normalizeStdout.ts

@@ -1,5 +1,6 @@
 import Fixtures from './fixtures'
 import _ from 'lodash'
+import stripAnsi from 'strip-ansi'
 
 export const e2ePath = Fixtures.projectPath('e2e')
 
@@ -114,7 +115,7 @@ export const normalizeStdout = function (str: string, options: any = {}) {
 
   // remove all of the dynamic parts of stdout
   // to normalize against what we expected
-  str = str
+  str = stripAnsi(str)
   // /Users/jane/........../ -> //foo/bar/.projects/
   // (Required when paths are printed outside of our own formatting)
   .split(pathUpToProjectName).join('/foo/bar/.projects')

system-tests/lib/system-tests.ts

@@ -1014,7 +1014,6 @@ const systemTests = {
     return stdout
     .replace(/using description file: .* \(relative/g, 'using description file: [..] (relative')
     .replace(/Module build failed \(from .*\)/g, 'Module build failed (from [..])')
-    .replace(/Project is running at http:\/\/localhost:\d+/g, 'Project is running at http://localhost:xxxx')
     .replace(/webpack.*compiled with.*in \d+ ms/g, 'webpack x.x.x compiled with x errors in xxx ms')
   },
 

system-tests/project-fixtures/react/cypress-vite-port.config.ts

@@ -0,0 +1,10 @@
+import viteConfig from './cypress-vite.config'
+
+const port = 9999
+
+viteConfig.port = port
+viteConfig.env = {
+  PORT_CHECK: port,
+}
+
+export default viteConfig

system-tests/project-fixtures/react/cypress-vite.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress'
+
 import type * as vite from 'vite'
 
 declare global {
@@ -9,12 +10,22 @@ declare global {
   }
 }
 
+const port = 8888
+
 export default defineConfig({
+  env: {
+    PORT_CHECK: port,
+  },
   videoCompression: false, // turn off video compression for CI
   component: {
     devServer: {
       framework: 'react',
       bundler: 'vite',
+      viteConfig: {
+        server: {
+          port,
+        },
+      },
     },
   },
   // These tests should run quickly / fail quickly,

system-tests/project-fixtures/react/cypress-webpack-port.config.ts

@@ -0,0 +1,10 @@
+import cypressWebpackConfig from './cypress-webpack.config'
+
+const port = 9999
+
+cypressWebpackConfig.port = port
+cypressWebpackConfig.env = {
+  PORT_CHECK: port,
+}
+
+export default cypressWebpackConfig

system-tests/project-fixtures/react/cypress-webpack.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress'
+
 import type * as webpack from 'webpack'
 import type * as webpackDevServer from 'webpack-dev-server'
 
@@ -12,14 +13,24 @@ declare global {
   }
 }
 
+const port = 8888
+
+const webpackConfig = require('./webpack.config.js')
+
+webpackConfig.devServer ??= {}
+webpackConfig.devServer.port = port
+
 export default defineConfig({
+  env: {
+    PORT_CHECK: port,
+  },
   videoCompression: false, // turn off video compression for CI
   component: {
     devServer: {
       framework: 'react',
       bundler: 'webpack',
       webpackConfig: {
-        ...require('./webpack.config.js'),
+        ...webpackConfig,
         stats: 'minimal',
       },
     },

system-tests/project-fixtures/react/src/port.cy.jsx

@@ -0,0 +1,8 @@
+const portCheck = Cypress.env('PORT_CHECK')
+
+it('ensures we have launched at the overriden port', () => {
+  expect(portCheck).to.be.a('number')
+  expect(portCheck).to.be.oneOf([8888, 9999])
+
+  expect(window.location.host).to.eq(`localhost:${portCheck}`)
+})

system-tests/test/vite_dev_server_fresh_spec.ts

@@ -1,4 +1,5 @@
 import systemTests from '../lib/system-tests'
+
 import type { fixtureDirs } from '@tooling/system-tests'
 
 type ProjectDirs = typeof fixtureDirs
@@ -18,11 +19,18 @@ describe('@cypress/vite-dev-server', function () {
           browser: 'chrome',
           snapshot: true,
           expectedExitCode: 7,
-          onStdout: (stdout) => {
-            return stdout.replace(/http:\/\/localhost:\d+/g, 'http://localhost:xxxx')
-          },
         })
       })
+
+      systemTests.it.only(`executes all of the tests for ${project} when port is statically configured`, {
+        project,
+        configFile: 'cypress-vite-port.config.ts',
+        spec: 'src/port.cy.jsx',
+        testingType: 'component',
+        browser: 'chrome',
+        snapshot: true,
+        expectedExitCode: 0,
+      })
     }
   })
 })

system-tests/test/webpack_dev_server_fresh_spec.ts

@@ -1,6 +1,6 @@
 import systemTests from '../lib/system-tests'
+
 import type { fixtureDirs } from '@tooling/system-tests'
-import { stripAnsi } from '@packages/server/lib/errors'
 
 type ProjectDirs = typeof fixtureDirs
 
@@ -20,10 +20,23 @@ describe('@cypress/webpack-dev-server', function () {
           snapshot: true,
           expectedExitCode: 7,
           onStdout: (stdout) => {
-            return systemTests.normalizeWebpackErrors(stripAnsi(stdout))
+            return systemTests.normalizeWebpackErrors(stdout)
           },
         })
       })
+
+      systemTests.it(`executes all of the tests for ${project} when port is statically configured`, {
+        project,
+        configFile: 'cypress-webpack-port.config.ts',
+        spec: 'src/port.cy.jsx',
+        testingType: 'component',
+        browser: 'chrome',
+        snapshot: true,
+        expectedExitCode: 0,
+        onStdout: (stdout) => {
+          return systemTests.normalizeWebpackErrors(stdout)
+        },
+      })
     }
   })
 })