breaking: remove support for @vue/cli-serivce from Cypress Component Testing

Author: AtofStryker

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-11-07-24-cra-removal
+11-07-24-vue-cli-removal

cli/CHANGELOG.md

@@ -23,6 +23,7 @@ _Released 12/3/2024 (PENDING)_
 - Cypress Component Testing no longer supports `Angular` versions 13, 14, 15, and 16. The minimum supported version is now `17.2.0` in order to fully support Angular [signals](https://angular.dev/guide/signals). Addresses [#29582](https://github.com/cypress-io/cypress/issues/29582). Addressed in [#30539](https://github.com/cypress-io/cypress/pull/30539).
 - The `cypress/angular-signals` test harness is no longer included in the Cypress binary. Instead, signals support is now shipped with `cypress/angular`! This requires `rxjs` to be installed as a `peerDependency`. Addresses [#29606](https://github.com/cypress-io/cypress/issues/29606).
 - Cypress Component Testing no longer supports `create-react-app`. Addresses [#30028](https://github.com/cypress-io/cypress/issues/30028).
+- Cypress Component Testing no longer supports `@vue/cli-service`. Addresses [#30481](https://github.com/cypress-io/cypress/issues/30481).
 
 **Deprecations:**
 

cli/types/cypress.d.ts

@@ -3515,7 +3515,7 @@ declare namespace Cypress {
 
   type DevServerConfigOptions = {
     bundler: 'webpack'
-    framework: 'react' | 'vue' | 'vue-cli' | 'next' | 'svelte'
+    framework: 'react' | 'vue' | 'next' | 'svelte'
     webpackConfig?: ConfigHandler<PickConfigOpt<'webpackConfig'>>
   } | {
     bundler: 'vite'

cli/types/tests/cypress-npm-api-test.ts

@@ -104,16 +104,6 @@ const componentConfigVueWebpack: Cypress.ConfigOptions = {
   }
 }
 
-const componentConfigVueCliWebpack: Cypress.ConfigOptions = {
-  component: {
-    devServer: {
-      bundler: 'webpack',
-      framework: 'vue-cli',
-      webpackConfig: {}
-    }
-  }
-}
-
 const componentConfigViteReact: Cypress.ConfigOptions = {
   component: {
     devServer: {

npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts

@@ -7,7 +7,6 @@ import type { Compiler, Configuration } from 'webpack'
 
 import { createWebpackDevServer } from './createWebpackDevServer'
 import debugLib from 'debug'
-import { vueCliHandler } from './helpers/vueCliHandler'
 import { nextHandler } from './helpers/nextHandler'
 import { sourceDefaultWebpackDependencies, SourceRelativeWebpackResult } from './helpers/sourceRelativeWebpackModules'
 import { angularHandler } from './helpers/angularHandler'
@@ -107,9 +106,6 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
   }
 
   switch (devServerConfig.framework) {
-    case 'vue-cli':
-      return await vueCliHandler(devServerConfig)
-
     case 'next':
       return await nextHandler(devServerConfig)
 

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

@@ -66,7 +66,6 @@ export const cypressWebpackPath = (config: WebpackDevServerConfig) => {
 type FrameworkWebpackMapper = { [Property in Frameworks]: string | undefined }
 
 const frameworkWebpackMapper: FrameworkWebpackMapper = {
-  'vue-cli': '@vue/cli-service',
   react: undefined,
   vue: undefined,
   next: 'next',

npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts

@@ -208,21 +208,21 @@ describe('Vue', {
   numTestsKeptInMemory: 1,
 }, () => {
   beforeEach(() => {
-    cy.scaffoldProject('vuecli5-vue3')
+    cy.scaffoldProject('vue3-webpack-ts-configured')
   })
 
   it('error conditions', () => {
     const verify = loadErrorSpec({
-      projectName: 'vuecli5-vue3',
+      projectName: 'vue3-webpack-ts-configured',
       configFile: 'cypress.config.ts',
-      filePath: 'src/components/Errors.cy.js',
+      filePath: 'src/components/Errors.cy.ts',
       failCount: 4,
     })
 
     verify('error on mount', {
       fileName: 'Errors.vue',
       line: 19,
-      column: 16,
+      column: 15,
       message: [
         'mount error',
       ],
@@ -232,7 +232,7 @@ describe('Vue', {
     verify('sync error', {
       fileName: 'Errors.vue',
       line: 24,
-      column: 16,
+      column: 15,
       uncaught: true,
       uncaughtMessage: 'sync error',
       message: [
@@ -247,7 +247,7 @@ describe('Vue', {
     verify('async error', {
       fileName: 'Errors.vue',
       line: 28,
-      column: 18,
+      column: 17,
       uncaught: true,
       uncaughtMessage: 'async error',
       message: [
@@ -265,8 +265,8 @@ describe('Vue', {
         'Timed out retrying',
         'element-that-does-not-exist',
       ],
-      codeFrameRegex: /Errors\.cy\.js:25/,
-      stackRegex: /Errors\.cy\.js:25/,
+      codeFrameRegex: /Errors\.cy\.ts:32/,
+      stackRegex: /Errors\.cy\.ts:32/,
     })
   })
 })

npm/webpack-dev-server/src/helpers/vueCliHandler.ts

@@ -6,7 +6,10 @@ const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
   { projectName: 'angular-18', test: 'app.component' },
   { projectName: 'react-vite-ts-configured', test: 'App.cy' },
   { projectName: 'react18', test: 'App.cy' },
-  { projectName: 'vueclivue3-configured', test: 'HelloWorld.cy' },
+  { projectName: 'next-14', test: 'index.cy' },
+  { projectName: 'vue3-vite-ts-configured', test: 'HelloWorld.cy' },
+  { projectName: 'vue3-webpack-ts-configured', test: 'HelloWorld.cy' },
+  { projectName: 'svelte-vite', test: 'App.cy' },
 ]
 
 // These are especially flaky on windows, skipping them there.

npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts

@@ -15,36 +15,36 @@ describe('packagesToInstall', () => {
     removeCommonNodeModules()
   })
 
-  it('vueclivue3-unconfigured', async () => {
+  it('regular react project with webpack', async () => {
     const ctx = createTestDataContext()
 
-    const projectPath = await scaffoldMigrationProject('vueclivue3-unconfigured')
+    const projectPath = await scaffoldMigrationProject('react-app-webpack-5-unconfigured')
 
     ctx.update((coreData) => {
       coreData.currentProject = projectPath
-      coreData.wizard.chosenFramework = findFramework('vueclivue3')
+      coreData.wizard.chosenFramework = findFramework('react')
       coreData.wizard.chosenBundler = findBundler('webpack')
     })
 
     const actual = await ctx.wizard.installDependenciesCommand()
 
-    expect(actual).to.eq(`npm install -D @vue/cli-service vue`)
+    expect(actual).to.eq(`npm install -D webpack react react-dom`)
   })
 
-  it('vuecli5vue3-unconfigured', async () => {
+  it('regular vue project with webpack', async () => {
     const ctx = createTestDataContext()
 
-    const projectPath = await scaffoldMigrationProject('vuecli5vue3-unconfigured')
+    const projectPath = await scaffoldMigrationProject('vue3-webpack-ts-unconfigured')
 
     ctx.update((coreData) => {
       coreData.currentProject = projectPath
-      coreData.wizard.chosenFramework = findFramework('vueclivue3')
+      coreData.wizard.chosenFramework = findFramework('vue3')
       coreData.wizard.chosenBundler = findBundler('webpack')
     })
 
     const actual = await ctx.wizard.installDependenciesCommand()
 
-    expect(actual).to.eq(`npm install -D @vue/cli-service vue`)
+    expect(actual).to.eq(`npm install -D webpack vue`)
   })
 
   it('regular react project with vite', async () => {

packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts

@@ -209,30 +209,29 @@ describe('component testing dependency warnings', () => {
     cy.get('.warning-markdown').find('li').should('have.length', 3)
   })
 
-  // TODO: make this version of @vue/cli-service 5 in https://github.com/cypress-io/cypress/issues/30295 or related issue
-  it.skip('warns against outdated @vue/cli dependency', () => {
-    cy.scaffoldProject('outdated-deps-vuecli3')
-    cy.addProject('outdated-deps-vuecli3')
+  it('warns against outdated vue/vite dependency', () => {
+    cy.scaffoldProject('outdated-deps-vue-vite')
+    cy.addProject('outdated-deps-vue-vite')
     cy.openGlobalMode()
     cy.visitLaunchpad()
-    cy.contains('outdated-deps-vuecli3').click()
+    cy.contains('outdated-deps-vue-vite').click()
     cy.get('[data-cy="warning-alert"]').should('not.exist')
     cy.contains('a', 'Projects').click()
     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', '@vue/cli-service. Expected ^4.0.0 || ^5.0.0, found 3.12.1.')
+    .should('contain.text', 'vite. Expected ^4.0.0 || ^5.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)
   })
 
   it('does not show warning for project with supported dependencies', () => {
-    cy.scaffoldProject('vueclivue3-configured')
-    cy.addProject('vueclivue3-configured')
+    cy.scaffoldProject('vue3-webpack-ts-configured')
+    cy.addProject('vue3-webpack-ts-configured')
     cy.openGlobalMode()
     cy.visitLaunchpad()
-    cy.contains('vueclivue3-configured').click()
+    cy.contains('vue3-webpack-ts-configured').click()
     cy.get('[data-cy="warning-alert"]').should('not.exist')
     cy.get('a').contains('Projects').click()
     cy.get('[data-cy-testingtype="component"]', { timeout: 10000 }).click()

packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts

@@ -24,16 +24,17 @@ const ONE_MINUTE = 1000 * 60
 describe('scaffolding component testing', {
   taskTimeout: ONE_MINUTE,
 }, () => {
-  context('vuecli5vue3', () => {
-    it('scaffolds component testing for Vue CLI 5 w/ Vue 3 project', () => {
-      startSetupFor('vuecli5vue3-unconfigured')
+  context('webpack5vue3', () => {
+    it('scaffolds component testing for Webpack 5 w/ Vue 3 project', () => {
+      startSetupFor('vue3-webpack-ts-unconfigured')
 
       // should detect correctly
-      cy.get('button').should('be.visible').contains('Vue CLI (Vue 3)(detected)')
+      cy.get('button').should('be.visible').contains('Vue.js 3(detected)')
+      cy.get('button').should('be.visible').contains('Webpack(detected)')
       cy.get('button').contains('Next step').click()
       cy.findByRole('button', { name: 'Continue' }).click()
       cy.get('[data-cy="launchpad-Configuration files"]').should('be.visible')
-      verifyConfigFile(`cypress.config.js`)
+      verifyConfigFile(`cypress.config.ts`)
     })
   })
 

packages/data-context/test/unit/sources/WizardDataSource.spec.ts

@@ -47,7 +47,7 @@ describe('<SelectFrameworkOrBundler />', () => {
           {
             name: 'VueJs',
             id: 'vue',
-            type: 'vueclivue3',
+            type: 'vite',
             supportStatus: 'full',
           },
         ]}