{"record":{"id":"3807b70bfebf0c3c","repo":"cypress-io/cypress","slug":"unable-to-generate-spec-for-this-options-framewo","errorCode":null,"errorMessage":"Unable to generate spec for ${this.options.framework.codeGenFramework}","messagePattern":"Unable to generate spec for (.+?)","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/data-context/src/codegen/spec-options.ts","lineNumber":64,"sourceCode":"      codeGenType: this.options.codeGenType,\n      fileName: await this.buildFileName(),\n      templateKey: this.options.codeGenType as TemplateKey,\n      overrideCodeGenDir: '',\n    }\n  }\n\n  private async getComponentCodeGenOptions () {\n    if (!this.options.framework) {\n      throw new Error('Cannot generate a spec without a framework')\n    }\n\n    switch (this.options.framework.codeGenFramework) {\n      case 'react':\n        return await this.getReactSpecOptions()\n      case 'vue':\n        return await this.getVueSpecOptions()\n      default:\n        throw new Error(`Unable to generate spec for ${this.options.framework.codeGenFramework}`)\n    }\n  }\n\n  private getRelativePathToComponent (specParsedPath?: ParsedPath) {\n    if (specParsedPath) {\n      const componentPathRelative = path.relative(specParsedPath.dir, this.parsedPath.dir)\n\n      const componentPath = path.join(componentPathRelative, this.parsedPath.base)\n\n      return toPosix(componentPath.startsWith('.') ? componentPath : `./${componentPath}`)\n    }\n\n    return `./${this.parsedPath.base}`\n  }\n\n  private async getVueSpecOptions () {\n    const componentName = this.buildComponentNameFromFilename(this.parsedPath.name)\n","sourceCodeStart":46,"sourceCodeEnd":82,"githubUrl":"https://github.com/cypress-io/cypress/blob/0d85fdc91230885bca0a91df278312800a48b727/packages/data-context/src/codegen/spec-options.ts#L46-L82","documentation":"Thrown by SpecOptions.getComponentCodeGenOptions() when generating a component test spec for a framework that has no code-generation path. The switch on this.options.framework.codeGenFramework only handles 'react' and 'vue' (spec-options.ts:58-65), but the type Cypress.ResolvedComponentFrameworkDefinition.codeGenFramework permits 'react' | 'vue' | 'svelte' | 'angular' (cli/types/cypress.d.ts:3635) and scaffold-config flags angular/svelte projects with those values (scaffold-config/src/frameworks.ts:199,219). So any Angular or Svelte component spec generation falls through to the default branch and throws. It is a codegen-coverage gap, not a runtime/user-input fault.","triggerScenarios":"Invoking component spec generation (SpecOptions.getCodeGenOptions with codeGenType:'component') for a project whose detected framework.codeGenFramework is 'angular' or 'svelte'. This happens through the launchpad/app 'generate spec' action after scaffold-config detected an Angular or Svelte setup.","commonSituations":"User onboards component testing for an Angular (@cypress/angular) or Svelte (@cypress/svelte) project, selects a component, and clicks 'Create spec' / 'Generate spec'. Also occurs if a custom/registered framework ends up with a codeGenFramework value outside the switch, or after upgrading Cypress where angular/svelte CT became selectable but this generator was not extended.","solutions":["Create the component spec file manually instead of using the generator: add a *.cy.{ts,js} next to the component importing it via the Angular/Svelte mount API.","If you maintain this code: extend the switch in spec-options.ts with 'angular' and 'svelte' cases (or route them through the existing React/Vue path where compatible) so the default branch is unreachable for supported frameworks.","Guard the UI layer (app/launchpad) so the 'Generate spec' action is only offered when framework.codeGenFramework is 'react' or 'vue', hiding it for angular/svelte until generation is supported.","Verify the detected framework is what you expect (check the resolved framework in cypress.config / onboarding state); a wrong detection mapping can push a React/Vue project into an unsupported codeGenFramework."],"exampleFix":"// before\nconst opts = await specOptions.getCodeGenOptions() // throws for angular/svelte\n\n// after (caller-side guard before codegen)\nconst supported = ['react', 'vue']\nif (framework && !supported.includes(framework.codeGenFramework)) {\n  // scaffold manually or surface 'generation not supported' to the user\n  return null\n}\nconst opts = await specOptions.getCodeGenOptions()","handlingStrategy":"type-guard","validationCode":"const SUPPORTED_CODEGEN: ReadonlyArray<Cypress.ResolvedComponentFrameworkDefinition['codeGenFramework']> = ['react', 'vue']\n\nfunction canGenerateSpec(framework?: Cypress.ResolvedComponentFrameworkDefinition): boolean {\n  return !!framework && SUPPORTED_CODEGEN.includes(framework.codeGenFramework)\n}\n\n// before calling getCodeGenOptions():\nif (!canGenerateSpec(options.framework)) {\n  // skip generation, scaffold manually, or show 'not supported' in UI\n  return null\n}","typeGuard":"function isSupportedCodeGenFramework(\n  fw: string\n): fw is 'react' | 'vue' {\n  return fw === 'react' || fw === 'vue'\n}\n\n// usage\nif (framework && !isSupportedCodeGenFramework(framework.codeGenFramework)) {\n  // do not invoke the generator\n}","tryCatchPattern":null,"preventionTips":["Gating the 'Generate spec' UI action on framework.codeGenFramework being 'react' or 'vue' so unsupported frameworks never reach the switch.","If extending support, add the case to the switch and remove the default reachability rather than catching the error downstream.","Treat the type union ('react' | 'vue' | 'svelte' | 'angular') as a compile-time signal: a switch over it should be exhaustive, so a new framework forces an explicit case."],"tags":["codegen","component-testing","angular","svelte","framework-detection"],"backgroundTag":null,"analyzedSha":"0d85fdc91230885bca0a91df278312800a48b727","analyzedAt":"2026-08-12T16:24:28.056Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}