breaking: remove support for vite 2 and 3 from @cypress/vite-dev-server

cli/CHANGELOG.md

@@ -15,6 +15,7 @@ _Released 12/3/2024 (PENDING)_
 - Upgraded bundled Node.js version from `18.17.0` to `20.18.0`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547).
 - It is no longer possible to make a `fetch` or `XMLHttpRequest` request from the `about:blank` page in Electron (i.e. `cy.window().then((win) => win.fetch('<some-url>')`). You must use `cy.request` instead or perform some form of initial navigation via `cy.visit()`. Addressed in [#29547](https://github.com/cypress-io/cypress/pull/30394).
 - `@cypress/webpack-dev-server` no longer supports `webpack-dev-server` version 3. Additionally, `@cypress/webpack-dev-server` now ships with `webpack-dev-server` version 5 by default. `webpack-dev-server` version 4 will need to be installed along side Cypress if you are still using `webpack` version 4. Addresses [#29308](https://github.com/cypress-io/cypress/issues/29308), [#30347](https://github.com/cypress-io/cypress/issues/30347), and [#30141](https://github.com/cypress-io/cypress/issues/30141).
+- `@cypress/vite-dev-server` no longer supports `vite` versions 2 and 3. Addresses [#29377](https://github.com/cypress-io/cypress/issues/29377) and [#29378](https://github.com/cypress-io/cypress/issues/29378)
 
 **Bugfixes:**
 

npm/vite-dev-server/cypress/e2e/react.cy.ts

@@ -4,7 +4,7 @@ import dedent from 'dedent'
 
 type ProjectDirs = typeof fixtureDirs
 
-const VITE_REACT: ProjectDirs[number][] = ['vite2.8.6-react', 'vite2.9.1-react']
+const VITE_REACT: ProjectDirs[number][] = ['vite4.5.5-react', 'vite5.4.10-react']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectDirs[number][] = []

npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts

@@ -44,22 +44,23 @@ describe('Config options', () => {
   })
 
   it('supports supportFile = false', () => {
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-no-support.config.ts', '--component'])
+    cy.scaffoldProject('vite5.4.10-react')
+    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite-no-support.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
     cy.specsPageIsVisible()
     cy.contains('App.cy.jsx').click()
     cy.waitForSpecToFinish()
-    cy.get('.passed > .num').should('contain', 1)
+    // no support file means there is no mount function registered, so all tests should fail
+    cy.get('.failed > .num').should('contain', 2)
   })
 
   it('supports serving files with whitespace', () => {
     const specWithWhitespace = 'spec with whitespace.cy.jsx'
 
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
+    cy.scaffoldProject('vite5.4.10-react')
+    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.withCtx(async (ctx, { specWithWhitespace }) => {
@@ -76,8 +77,8 @@ describe('Config options', () => {
   })
 
   it('supports @cypress/vite-dev-server', () => {
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-dev-server-function.config.ts', '--component'])
+    cy.scaffoldProject('vite5.4.10-react')
+    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite-dev-server-function.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -88,8 +89,8 @@ describe('Config options', () => {
   })
 
   it('supports viteConfig as an async function', () => {
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-async-function-config.config.ts', '--component'])
+    cy.scaffoldProject('vite5.4.10-react')
+    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite-async-function-config.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -119,8 +120,8 @@ describe('sourcemaps', () => {
       })
     `
 
-    cy.scaffoldProject('vite3.0.2-react')
-    cy.openProject('vite3.0.2-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
+    cy.scaffoldProject('vite5.4.10-react')
+    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.withCtx(async (ctx, o) => {
@@ -159,9 +160,9 @@ describe('sourcemaps', () => {
       cy.get('.runnable-err-file-path', { timeout: 250 }).should('contain', `${specName}:${line}:${column}`)
     }
 
-    verifySourcemap('JsErrorSpec.cy.js', 7, 9)
+    verifySourcemap('JsErrorSpec.cy.js', 7, 8)
 
-    verifySourcemap('JsWithImportErrorSpec.cy.js', 9, 9)
+    verifySourcemap('JsWithImportErrorSpec.cy.js', 9, 8)
 
     verifySourcemap('JsxErrorSpec.cy.jsx', 7, 8)
 

packages/launchpad/cypress/e2e/config-warning.cy.ts

@@ -202,7 +202,7 @@ describe('component testing dependency warnings', () => {
     cy.get('[data-cy-testingtype="component"]').click()
     cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
     .should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
-    .should('contain.text', 'vite. Expected ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0, found 2.0.0-beta.70')
+    .should('contain.text', 'vite. Expected ^4.0.0 || ^5.0.0, found 3.2.11')
     .should('contain.text', 'react. Expected ^16.0.0 || ^17.0.0 || ^18.0.0, found 15.6.2.')
     .should('contain.text', 'react-dom. Expected ^16.0.0 || ^17.0.0 || ^18.0.0 but dependency was not found.')
 

packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts

@@ -103,7 +103,7 @@ describe('scaffolding component testing', {
         await ctx.actions.file.writeFileInProject(
           ctx.path.join('node_modules', 'react-dom', 'package.json'),
           JSON.stringify({
-            'version': '17.0.0',
+            'version': '18.3.1',
           }),
         )
       })
@@ -112,6 +112,11 @@ describe('scaffolding component testing', {
       cy.findByTestId('dependency-react-dom').within(() => {
         cy.get('[aria-label="installed"]').should('exist')
       })
+
+      // now clean up the state that we mutated
+      cy.withCtx(async (ctx) => {
+        await ctx.fs.rmSync(ctx.path.join(ctx.currentProject!, 'node_modules', 'react-dom', 'package.json'))
+      })
     })
   })
 

packages/scaffold-config/src/dependencies.ts

@@ -76,7 +76,7 @@ export const WIZARD_DEPENDENCY_VITE = {
   package: 'vite',
   installer: 'vite',
   description: 'Vite is dev server that serves your source files over native ES modules',
-  minVersion: '^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0',
+  minVersion: '^4.0.0 || ^5.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_NUXT = {

packages/scaffold-config/test/unit/detect.spec.ts

@@ -144,22 +144,8 @@ describe('detectFramework', () => {
     const projectPath = await scaffoldMigrationProject('react-vite-ts-unconfigured')
 
     fakeDepsInNodeModules(projectPath, [
-      { devDependency: 'vite', version: '2.0.0' },
-      { dependency: 'react', version: '17.0.0' },
-    ])
-
-    const actual = await detectFramework(projectPath, resolvedCtFrameworks)
-
-    expect(actual.framework?.type).to.eq('react')
-    expect(actual.bundler).to.eq('vite')
-  })
-
-  it(`React with Vite using pre-release version`, async () => {
-    const projectPath = await scaffoldMigrationProject('react-vite-ts-unconfigured')
-
-    fakeDepsInNodeModules(projectPath, [
-      { devDependency: 'vite', version: '2.5.0-alpha.4' },
-      { dependency: 'react', version: '17.0.0' },
+      { devDependency: 'vite', version: '5.0.0' },
+      { dependency: 'react', version: '18.0.0' },
     ])
 
     const actual = await detectFramework(projectPath, resolvedCtFrameworks)
@@ -172,7 +158,7 @@ describe('detectFramework', () => {
     const projectPath = await scaffoldMigrationProject('vue3-vite-ts-unconfigured')
 
     fakeDepsInNodeModules(projectPath, [
-      { devDependency: 'vite', version: '2.0.0' },
+      { devDependency: 'vite', version: '5.0.0' },
       { dependency: 'vue', version: '3.0.0' },
     ])
 
@@ -213,7 +199,7 @@ describe('detectFramework', () => {
     })
   })
 
-  ;['2.0.0', '3.0.0'].forEach((v) => {
+  ;['4.0.0', '5.0.0'].forEach((v) => {
     it(`Svelte and Vite v${v}`, async () => {
       const projectPath = await scaffoldMigrationProject('svelte-vite-unconfigured')