fix: use resolved port for vite (#21490)

cypress-io · May 17, 2022 · 630e422 · 630e422 · cypress-bot · May 17, 2022
1 parent 8d79472
commit 630e422
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 5 deletions.
diff --git a/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts b/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
@@ -1,3 +1,6 @@
+/// <reference types="Cypress" />
+/// <reference path="../support/e2e.ts" />
+
 describe('Config options', () => {
   it('supports supportFile = false', () => {
     cy.scaffoldProject('vite2.9.1-react')
@@ -8,4 +11,21 @@ describe('Config options', () => {
     cy.contains('App.cy.jsx').click()
     cy.get('.passed > .num').should('contain', 1)
   })
+
+  it('chooses new port when specified port is in use', () => {
+    cy.scaffoldProject('vite2.9.1-react')
+    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-port-in-use.config.ts'])
+    cy.startAppServer('component')
+
+    cy.visitApp()
+
+    cy.contains('App.cy.jsx').click()
+    cy.get('.passed > .num').should('contain', 1)
+
+    cy.withCtx(async (ctx) => {
+      const config = ctx.lifecycleManager.loadedFullConfig
+
+      expect(config.baseUrl).to.equal('http://localhost:3001')
+    })
+  })
 })
diff --git a/npm/vite-dev-server/package.json b/npm/vite-dev-server/package.json
@@ -17,7 +17,6 @@
   "dependencies": {
     "debug": "4.3.3",
     "find-up": "6.3.0",
-    "get-port": "5.1.1",
     "local-pkg": "0.4.1",
     "pathe": "0.2.0"
   },

diff --git a/npm/vite-dev-server/src/devServer.ts b/npm/vite-dev-server/src/devServer.ts
@@ -1,5 +1,4 @@
 import debugFn from 'debug'
-import getPort from 'get-port'
 import { getVite, Vite } from './getVite'
 import { createViteDevServerConfig } from './resolveConfig'
 
@@ -24,10 +23,13 @@ export async function devServer (config: ViteDevServerConfig): Promise<Cypress.R
   const server = await devServer.create(config, vite)
 
   debug('Vite server created')
-  const port = await getPort({ port: 3000 })
 
-  debug('Starting Vite Server on port %i', port)
-  await server.listen(port)
+  await server.listen()
+  const { port } = server.config.server
+
+  if (!port) {
+    throw new Error('Missing vite dev server port.')
+  }
 
   debug('Successfully launched the vite server on port', port)
 

diff --git a/system-tests/project-fixtures/react/cypress-vite-port-in-use.config.ts b/system-tests/project-fixtures/react/cypress-vite-port-in-use.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'cypress'
+import defaultConfig from './cypress-vite.config'
+import * as http from 'http'
+
+export default defineConfig({
+  ...defaultConfig,
+  component: {
+    ...defaultConfig.component as Cypress.Config['component'],
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+      viteConfig: {
+        logLevel: 'silent',
+        server: {
+          port: 3000
+        }
+      },
+    },
+    async setupNodeEvents() {
+      await new Promise<void>((res) => http.createServer().listen(3000, '127.0.0.1', res))
+    }
+  }
+})