breaking: remove @vue/cli-service from Cypress Component Testing

.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

.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'
-        - 'breaking/remove_angular_signals_test_harness'
+        - 'breaking/remove_vue_cli_service'
         - '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: [ 'breaking/remove_angular_signals_test_harness', << pipeline.git.branch >> ]
+    - equal: [ 'breaking/remove_vue_cli_service', << 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: [ 'breaking/remove_angular_signals_test_harness', << pipeline.git.branch >> ]
+    - equal: [ 'breaking/remove_vue_cli_service', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -76,7 +76,7 @@ windowsWorkflowFilters: &windows-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: [ 'breaking/remove_angular_signals_test_harness', << pipeline.git.branch >> ]
+    - equal: [ 'breaking/remove_vue_cli_service', << 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" != "breaking/remove_angular_signals_test_harness" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "breaking/remove_vue_cli_service" ]]; 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

@@ -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/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)
 

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',

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/,
     })
   })
 })

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.

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')