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

…Testing [run ci]
cypress-io · Nov 8, 2024 · a2778de · a2778de
1 parent 37b944f
commit a2778de
Show file tree

Hide file tree

Showing 126 changed files with 9,161 additions and 40,801 deletions.
diff --git a/.circleci/cache-version.txt b/.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-service-removal
diff --git a/cli/CHANGELOG.md b/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:**
 

diff --git a/cli/types/cypress.d.ts b/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'

diff --git a/cli/types/tests/cypress-npm-api-test.ts b/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: {

diff --git a/npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts b/npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts
diff --git a/npm/webpack-dev-server/src/devServer.ts b/npm/webpack-dev-server/src/devServer.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)
 

diff --git a/npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts b/npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.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',

diff --git a/npm/webpack-dev-server/src/helpers/vueCliHandler.ts b/npm/webpack-dev-server/src/helpers/vueCliHandler.ts
diff --git a/npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts b/npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts
diff --git a/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts b/packages/app/cypress/e2e/runner/ct-framework-errors.cy.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/,
     })
   })
 })

diff --git a/packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts b/packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.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.

diff --git a/packages/data-context/test/unit/codegen/spec-options.spec.ts b/packages/data-context/test/unit/codegen/spec-options.spec.ts
@@ -89,7 +89,7 @@ describe('spec-options', () => {
             codeGenPath: `${tmpPath}/MyComponent.vue`,
             codeGenType: 'component',
             isDefaultSpecPattern: true,
-            framework: CT_FRAMEWORKS[0],
+            framework: CT_FRAMEWORKS[1],
             specPattern: [defaultSpecPattern.component],
           })
 
@@ -108,7 +108,7 @@ describe('spec-options', () => {
             codeGenPath: `${tmpPath}/MyComponent.vue`,
             codeGenType: 'component',
             isDefaultSpecPattern: true,
-            framework: CT_FRAMEWORKS[0],
+            framework: CT_FRAMEWORKS[1],
             specPattern: [defaultSpecPattern.component],
           })
 
@@ -127,7 +127,7 @@ describe('spec-options', () => {
             codeGenPath: `${tmpPath}/Counter.tsx`,
             codeGenType: 'component',
             isDefaultSpecPattern: true,
-            framework: CT_FRAMEWORKS[3],
+            framework: CT_FRAMEWORKS[2],
             specPattern: [defaultSpecPattern.component],
             componentName: 'Counter',
             isDefault: true,
@@ -146,7 +146,7 @@ describe('spec-options', () => {
             codeGenPath: `${tmpPath}/Counter.tsx`,
             codeGenType: 'component',
             isDefaultSpecPattern: true,
-            framework: CT_FRAMEWORKS[3],
+            framework: CT_FRAMEWORKS[2],
             specPattern: [defaultSpecPattern.component],
             componentName: 'View',
           })
@@ -166,7 +166,7 @@ describe('spec-options', () => {
             codeGenPath: `${tmpPath}/Counter.tsx`,
             codeGenType: 'component',
             isDefaultSpecPattern: true,
-            framework: CT_FRAMEWORKS[3],
+            framework: CT_FRAMEWORKS[2],
             specPattern: [defaultSpecPattern.component],
             componentName: 'View',
           })
@@ -212,7 +212,7 @@ describe('spec-options', () => {
               codeGenPath: `${tmpPath}/${componentPath}`,
               codeGenType: 'component',
               isDefaultSpecPattern: false,
-              framework: CT_FRAMEWORKS[0],
+              framework: CT_FRAMEWORKS[1],
               specPattern,
               specs,
             })
@@ -322,7 +322,7 @@ describe('spec-options', () => {
               codeGenType: 'component',
               isDefaultSpecPattern: true,
               specPattern: [defaultSpecPattern.component],
-              framework: CT_FRAMEWORKS[0],
+              framework: CT_FRAMEWORKS[1],
             })
 
             await fs.outputFile(`${tmpPath}/${fileName}`, '// foo')

diff --git a/packages/data-context/test/unit/sources/WizardDataSource.spec.ts b/packages/data-context/test/unit/sources/WizardDataSource.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 () => {