feat: component testing now supports vite 6 [run ci] (#30679)

.circleci/workflows.yml

@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'feat/support_angular_19'
+        - 'feat/support_vite_6'
         - 'publish-binary'
 
 # usually we don't build Mac app - it takes a long time
@@ -42,7 +42,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'feat/support_angular_19', << pipeline.git.branch >> ]
+    - equal: [ 'feat/support_vite_6', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -53,7 +53,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'feat/support_angular_19', << pipeline.git.branch >> ]
+    - equal: [ 'feat/support_vite_6', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -152,7 +152,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/support_angular_19" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/support_vite_6" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

cli/CHANGELOG.md

@@ -42,6 +42,7 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr
   - `Next.js` version 15. Addresses [#30445](https://github.com/cypress-io/cypress/issues/30445).
   - `React` version 19. Cypress will allow detected use of the React 19 Release Candidate until React 19 is officially released. Addresses [#29470](https://github.com/cypress-io/cypress/issues/29470).
   - `Angular` version 19. Addresses [#30175](https://github.com/cypress-io/cypress/issues/30175).
+  - `Vite` version 6. Addresses [#30591](https://github.com/cypress-io/cypress/issues/30591).
 
 **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][] = ['vite4.5.5-react', 'vite5.4.10-react']
+const VITE_REACT: ProjectDirs[number][] = ['vite4.5.5-react', 'vite5.4.10-react', 'vite6.0.0-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,8 +44,8 @@ describe('Config options', () => {
   })
 
   it('supports supportFile = false', () => {
-    cy.scaffoldProject('vite5.4.10-react')
-    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite-no-support.config.ts', '--component'])
+    cy.scaffoldProject('vite6.0.0-react')
+    cy.openProject('vite6.0.0-react', ['--config-file', 'cypress-vite-no-support.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -59,8 +59,8 @@ describe('Config options', () => {
   it('supports serving files with whitespace', () => {
     const specWithWhitespace = 'spec with whitespace.cy.jsx'
 
-    cy.scaffoldProject('vite5.4.10-react')
-    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
+    cy.scaffoldProject('vite6.0.0-react')
+    cy.openProject('vite6.0.0-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.withCtx(async (ctx, { specWithWhitespace }) => {
@@ -77,8 +77,8 @@ describe('Config options', () => {
   })
 
   it('supports @cypress/vite-dev-server', () => {
-    cy.scaffoldProject('vite5.4.10-react')
-    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite-dev-server-function.config.ts', '--component'])
+    cy.scaffoldProject('vite6.0.0-react')
+    cy.openProject('vite6.0.0-react', ['--config-file', 'cypress-vite-dev-server-function.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -89,8 +89,8 @@ describe('Config options', () => {
   })
 
   it('supports viteConfig as an async function', () => {
-    cy.scaffoldProject('vite5.4.10-react')
-    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite-async-function-config.config.ts', '--component'])
+    cy.scaffoldProject('vite6.0.0-react')
+    cy.openProject('vite6.0.0-react', ['--config-file', 'cypress-vite-async-function-config.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -120,8 +120,8 @@ describe('sourcemaps', () => {
       })
     `
 
-    cy.scaffoldProject('vite5.4.10-react')
-    cy.openProject('vite5.4.10-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
+    cy.scaffoldProject('vite6.0.0-react')
+    cy.openProject('vite6.0.0-react', ['--config-file', 'cypress-vite.config.ts', '--component'])
     cy.startAppServer('component')
 
     cy.withCtx(async (ctx, o) => {

npm/vite-dev-server/package.json

@@ -29,6 +29,7 @@
     "ts-node": "^10.9.2",
     "vite-4": "npm:vite@^4.5.3",
     "vite-5": "npm:vite@^5.2.8",
+    "vite-6": "npm:vite@^6.0.0",
     "vite-plugin-inspect": "0.8.4"
   },
   "files": [

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

@@ -1,6 +1,6 @@
 import debugFn from 'debug'
 import semverMajor from 'semver/functions/major'
-import type { UserConfig } from 'vite-5'
+import type { UserConfig } from 'vite-6'
 import { getVite, Vite } from './getVite'
 import { createViteDevServerConfig } from './resolveConfig'
 

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

@@ -3,7 +3,7 @@ import type { ViteDevServerConfig } from './devServer'
 
 const debug = debugFn('cypress:vite-dev-server:getVite')
 
-export type Vite = typeof import('vite-5')
+export type Vite = typeof import('vite-6')
 
 // "vite-dev-server" is bundled in the binary, so we need to require.resolve "vite"
 // from root of the active project since we don't bundle vite internally but rather

npm/vite-dev-server/src/plugins/cypress.ts

@@ -1,5 +1,5 @@
 import debugFn from 'debug'
-import type { ModuleNode, PluginOption, ViteDevServer } from 'vite-5'
+import type { ModuleNode, PluginOption, ViteDevServer } from 'vite-6'
 import type { Vite } from '../getVite'
 import { parse, HTMLElement } from 'node-html-parser'
 import fs from 'fs'

npm/vite-dev-server/src/plugins/sourcemap.ts

@@ -1,5 +1,5 @@
 import debugFn from 'debug'
-import type { PluginOption } from 'vite-5'
+import type { PluginOption } from 'vite-6'
 import type { Vite } from '../getVite'
 
 import type { ViteDevServerConfig } from '../devServer'

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

@@ -4,7 +4,7 @@
  * You can find it here https://github.com/vitest-dev/vitest/blob/main/packages/vitest/src/node/create.ts
  */
 import debugFn from 'debug'
-import type { InlineConfig } from 'vite-5'
+import type { InlineConfig } from 'vite-6'
 import path from 'path'
 import semverGte from 'semver/functions/gte'
 

npm/vite-dev-server/test/resolveConfig.spec.ts

@@ -2,6 +2,7 @@ import Chai, { expect } from 'chai'
 import { EventEmitter } from 'events'
 import * as vite4 from 'vite-4'
 import * as vite5 from 'vite-5'
+import * as vite6 from 'vite-6'
 import { scaffoldSystemTestProject } from './test-helpers/scaffoldProject'
 import { createViteDevServerConfig } from '../src/resolveConfig'
 import sinon from 'sinon'
@@ -22,7 +23,7 @@ const getViteDevServerConfig = (projectRoot: string) => {
     framework: 'react',
   } as unknown as ViteDevServerConfig
 }
-const MAJOR_VERSIONS: ({version: 4, vite: any } | {version: 5, vite: any })[] = [
+const MAJOR_VERSIONS: ({version: 4, vite: any } | {version: 5, vite: any } | {version: 6, vite: any })[] = [
   {
     version: 4,
     vite: vite4,
@@ -31,6 +32,10 @@ const MAJOR_VERSIONS: ({version: 4, vite: any } | {version: 5, vite: any })[] =
     version: 5,
     vite: vite5,
   },
+  {
+    version: 6,
+    vite: vite6,
+  },
 ]
 
 describe('resolveConfig', function () {

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 ^4.0.0 || ^5.0.0, found 3.2.11')
+    .should('contain.text', 'vite. Expected ^4.0.0 || ^5.0.0 || ^6.0.0, found 3.2.11')
     .should('contain.text', 'react. Expected ^18.0.0 || ^19.0.0-rc || ^19.0.0, found 15.6.2.')
     .should('contain.text', 'react-dom. Expected ^18.0.0 || ^19.0.0-rc || ^19.0.0 but dependency was not found.')
 
@@ -220,7 +220,7 @@ describe('component testing dependency warnings', () => {
     cy.get('[data-cy-testingtype="component"]', { timeout: 12000 }).click()
     cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
     .should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
-    .should('contain.text', 'vite. Expected ^4.0.0 || ^5.0.0, found 3.2.11.')
+    .should('contain.text', 'vite. Expected ^4.0.0 || ^5.0.0 || ^6.0.0, found 3.2.11.')
     .should('contain.text', 'vue. Expected ^3.0.0, found 2.7.8.')
 
     cy.get('.warning-markdown').find('li').should('have.length', 2)

packages/scaffold-config/src/dependencies.ts

@@ -49,7 +49,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: '^4.0.0 || ^5.0.0',
+  minVersion: '^4.0.0 || ^5.0.0 || ^6.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_NEXT = {