fix: UNIFY-1611, add next to framework options & add tests (#21557)

* fix: UNIFY-1611, add next to framework options & add tests

cli/types/cypress.d.ts

@@ -3033,9 +3033,9 @@ declare namespace Cypress {
 
   type DevServerFn<ComponentDevServerOpts = any> = (cypressDevServerConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
 
-  type DevServerConfigObject = {
+  type DevServerConfigOptions = {
     bundler: 'webpack'
-    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app'
+    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next'
     webpackConfig?: PickConfigOpt<'webpackConfig'>
   } | {
     bundler: 'vite'
@@ -3044,7 +3044,7 @@ declare namespace Cypress {
   }
 
   interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl'> {
-    devServer: DevServerFn<ComponentDevServerOpts> | DevServerConfigObject
+    devServer: DevServerFn<ComponentDevServerOpts> | DevServerConfigOptions
     devServerConfig?: ComponentDevServerOpts
   }
 

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

@@ -50,3 +50,78 @@ cypress.run().then(results => {
     results.status // $ExpectType "finished"
   }
 })
+
+// component options
+const componentConfigNextWebpack: Cypress.ConfigOptions = {
+  component: {
+    devServer: {
+      bundler: 'webpack',
+      framework: 'next',
+    }
+  }
+}
+
+const componentConfigReactWebpack: Cypress.ConfigOptions = {
+  component: {
+    devServer: {
+      bundler: 'webpack',
+      framework: 'react',
+    }
+  }
+}
+
+const componentConfigVueWebpack: Cypress.ConfigOptions = {
+  component: {
+    devServer: {
+      bundler: 'webpack',
+      framework: 'vue',
+    }
+  }
+}
+
+const componentConfigVueCliWebpack: Cypress.ConfigOptions = {
+  component: {
+    devServer: {
+      bundler: 'webpack',
+      framework: 'vue-cli',
+      webpackConfig: {}
+    }
+  }
+}
+
+const componentConfigNuxtWebpack: Cypress.ConfigOptions = {
+  component: {
+    devServer: {
+      bundler: 'webpack',
+      framework: 'nuxt',
+      webpackConfig: {}
+    }
+  }
+}
+
+const componentConfigCRAWebpack: Cypress.ConfigOptions = {
+  component: {
+    devServer: {
+      bundler: 'webpack',
+      framework: 'create-react-app',
+    }
+  }
+}
+
+const componentConfigViteReact: Cypress.ConfigOptions = {
+  component: {
+    devServer: {
+      bundler: 'vite',
+      framework: 'react',
+    }
+  }
+}
+
+const componentConfigViteVue: Cypress.ConfigOptions = {
+  component: {
+    devServer: {
+      bundler: 'vite',
+      framework: 'vue',
+    }
+  }
+}