breaking: remove nuxt2 support from Cypress Component Testing

.gitignore

@@ -293,9 +293,6 @@ typings/
 # next.js build output
 .next
 
-# nuxt.js build output
-.nuxt
-
 # rollup.js default build output
 dist/
 

cli/CHANGELOG.md

@@ -16,7 +16,8 @@ _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)
+- `@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).
+- Cypress Component Testing no longer supports `Nuxt.js` version 2. Addresses [#30468](https://github.com/cypress-io/cypress/issues/30468).
 
 **Bugfixes:**
 

cli/types/cypress.d.ts

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

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

@@ -114,16 +114,6 @@ const componentConfigVueCliWebpack: Cypress.ConfigOptions = {
   }
 }
 
-const componentConfigNuxtWebpack: Cypress.ConfigOptions = {
-  component: {
-    devServer: {
-      bundler: 'webpack',
-      framework: 'nuxt',
-      webpackConfig: {}
-    }
-  }
-}
-
 const componentConfigCRAWebpack: Cypress.ConfigOptions = {
   component: {
     devServer: {

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

@@ -8,7 +8,6 @@ import type { Compiler, Configuration } from 'webpack'
 import { createWebpackDevServer } from './createWebpackDevServer'
 import debugLib from 'debug'
 import { vueCliHandler } from './helpers/vueCliHandler'
-import { nuxtHandler } from './helpers/nuxtHandler'
 import { createReactAppHandler } from './helpers/createReactAppHandler'
 import { nextHandler } from './helpers/nextHandler'
 import { sourceDefaultWebpackDependencies, SourceRelativeWebpackResult } from './helpers/sourceRelativeWebpackModules'
@@ -111,8 +110,6 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
   switch (devServerConfig.framework) {
     case 'create-react-app':
       return createReactAppHandler(devServerConfig)
-    case 'nuxt':
-      return await nuxtHandler(devServerConfig)
 
     case 'vue-cli':
       return await vueCliHandler(devServerConfig)

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

@@ -68,7 +68,6 @@ type FrameworkWebpackMapper = { [Property in Frameworks]: string | undefined }
 const frameworkWebpackMapper: FrameworkWebpackMapper = {
   'create-react-app': 'react-scripts',
   'vue-cli': '@vue/cli-service',
-  'nuxt': '@nuxt/webpack',
   react: undefined,
   vue: undefined,
   next: 'next',

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

@@ -271,79 +271,6 @@ describe('Vue', {
   })
 })
 
-describe('Nuxt', {
-  viewportHeight: 768,
-  viewportWidth: 1024,
-  // Limiting tests kept in memory due to large memory cost
-  // of nested spec snapshots
-  numTestsKeptInMemory: 1,
-}, () => {
-  beforeEach(() => {
-    cy.scaffoldProject('nuxtjs-vue2-configured')
-  })
-
-  it('error conditions', () => {
-    const verify = loadErrorSpec({
-      projectName: 'nuxtjs-vue2-configured',
-      configFile: 'cypress.config.js',
-      filePath: 'components/Errors.cy.js',
-      failCount: 4,
-    })
-
-    verify('error on mount', {
-      fileName: 'Errors.vue',
-      line: 19,
-      uncaught: true,
-      uncaughtMessage: 'mount error',
-      message: [
-        'mount error',
-      ],
-      stackRegex: /Errors\.vue:19/,
-      codeFrameText: 'Errors.vue',
-    })
-
-    verify('sync error', {
-      fileName: 'Errors.vue',
-      line: 24,
-      uncaught: true,
-      uncaughtMessage: 'sync error',
-      message: [
-        'The following error originated from your application code',
-        'sync error',
-      ],
-      stackRegex: /Errors\.vue:24/,
-      codeFrameText: 'Errors.vue',
-    }).then(() => {
-      verifyErrorOnlyCapturedOnce('Error: sync error')
-    })
-
-    verify('async error', {
-      fileName: 'Errors.vue',
-      line: 28,
-      uncaught: true,
-      uncaughtMessage: 'async error',
-      message: [
-        'The following error originated from your application code',
-        'async error',
-      ],
-      stackRegex: /Errors\.vue:28/,
-      codeFrameText: 'Errors.vue',
-    }).then(() => {
-      verifyErrorOnlyCapturedOnce('Error: async error')
-    })
-
-    verify('command failure', {
-      command: 'get',
-      message: [
-        'Timed out retrying',
-        'element-that-does-not-exist',
-      ],
-      codeFrameRegex: /Errors\.cy\.js:25/,
-      stackRegex: /Errors\.cy\.js:25/,
-    })
-  })
-})
-
 // TODO: Svelte sourcemaps are generated but are not working properly on Webpack or Vite
 //       https://github.com/cypress-io/cypress/issues/23918
 describe.skip('Svelte', {

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

@@ -9,7 +9,6 @@ const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
   { projectName: 'react18', test: 'App.cy' },
   { projectName: 'create-react-app-configured', test: 'App.cy' },
   { projectName: 'vueclivue3-configured', test: 'HelloWorld.cy' },
-  { projectName: 'nuxtjs-vue2-configured', test: 'Tutorial.cy' },
 ]
 
 // These are especially flaky on windows, skipping them there.

packages/app/src/specs/banners/ComponentTestingAvailableBanner.cy.tsx

@@ -6,7 +6,6 @@ import type Sinon from 'sinon'
 const frameworks = [
   { name: 'React', type: 'react' },
   { name: 'Create React App', type: 'reactscripts' },
-  { name: 'Nuxt.js (v2)', type: 'nuxtjs' },
   { name: 'Vue', type: 'vue3' },
   { name: 'Angular', type: 'angular' },
   { name: 'Next.js', type: 'nextjs' },

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

@@ -126,22 +126,6 @@ describe('packagesToInstall', () => {
     expect(actual).to.eq(`npm install -D next react react-dom`)
   })
 
-  it('nuxtjs-vue2-unconfigured', async () => {
-    const ctx = createTestDataContext()
-
-    const projectPath = await scaffoldMigrationProject('nuxtjs-vue2-unconfigured')
-
-    ctx.update((coreData) => {
-      coreData.currentProject = projectPath
-      coreData.wizard.chosenFramework = findFramework('nuxtjs')
-      coreData.wizard.chosenBundler = findBundler('webpack')
-    })
-
-    const actual = await ctx.wizard.installDependenciesCommand()
-
-    expect(actual).to.eq('npm install -D nuxt@2 vue@2')
-  })
-
   it('framework and bundler are undefined', async () => {
     const ctx = createTestDataContext()
     const projectPath = await scaffoldMigrationProject('pristine-with-e2e-testing')

packages/frontend-shared/src/utils/icons.ts

@@ -1,7 +1,6 @@
 import LogoWebpack from '../assets/logos/webpack.svg'
 import LogoVite from '../assets/logos/vite.svg'
 import LogoNext from '../assets/logos/nextjs.svg'
-import LogoNuxt from '../assets/logos/nuxt.svg'
 import LogoVue from '../assets/logos/vue.svg'
 import LogoReact from '../assets/logos/react.svg'
 import LogoAngular from '../assets/logos/angular.svg'
@@ -15,7 +14,6 @@ export const FrameworkBundlerLogos = {
   vueclivue2: LogoVue,
   vueclivue3: LogoVue,
   nextjs: LogoNext,
-  nuxtjs: LogoNuxt,
   react: LogoReact,
   reactscripts: LogoReact,
   angular: LogoAngular,

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

@@ -133,20 +133,6 @@ describe('scaffolding component testing', {
     })
   })
 
-  context('nuxtjs-vue2-unconfigured', () => {
-    it('scaffolds component testing for Nuxt 2', () => {
-      startSetupFor('nuxtjs-vue2-unconfigured')
-
-      // should detect correctly
-      // Screen reader text is "Support is in", but don't want to rely on DOM introduced whitespace so using regex
-      cy.contains('button', /Nuxt\.js \(v2\)\s+Support is in\s+Alpha\(detected\)/).should('be.visible')
-      cy.contains('button', 'Next step').click()
-      cy.findByRole('button', { name: 'Continue' }).click()
-      cy.get('[data-cy="launchpad-Configuration files"]').should('be.visible')
-      verifyConfigFile(`cypress.config.js`)
-    })
-  })
-
   context('angular-cli-unconfigured', () => {
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23452
     it('scaffolds component testing for Angular', { retries: 15 }, () => {

packages/scaffold-config/README.md

@@ -18,7 +18,6 @@ We will also attempt to scaffold a configuration file for projects using React a
 | Vue CLI          | 4.x        | Webpack    | 4.x      | Vue 3        | `@cypress/vue@latest`   | [Link](../../system-tests/projects/vueclivue3-configured)           |
 | Vue CLI          | 5.x        | Webpack    | 5.x      | Vue 2        | `@cypress/vue2@latest`  | Covered by other Vue CLI test projects.                             |
 | Vue CLI          | 5.x        | Webpack    | 5.x      | Vue 3        | `@cypress/vue@latest`   | [Link](../../system-tests/projects/vuecli5vue3-configured)          |
-| Nuxt.js          | 2.x        | Webpack    | 4.x, 5.x | Vue 2        | `@cypress/vue2@latest`  | [Link](../../system-tests/projects/pristine-nuxtjs-vue2-configured) |
 
 ### TODO