Unable to generate spec for ${this.options.framework.codeGen

Error message

Unable to generate spec for ${this.options.framework.codeGenFramework}

What it means

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.

Source

Thrown at packages/data-context/src/codegen/spec-options.ts:64

      codeGenType: this.options.codeGenType,
      fileName: await this.buildFileName(),
      templateKey: this.options.codeGenType as TemplateKey,
      overrideCodeGenDir: '',
    }
  }

  private async getComponentCodeGenOptions () {
    if (!this.options.framework) {
      throw new Error('Cannot generate a spec without a framework')
    }

    switch (this.options.framework.codeGenFramework) {
      case 'react':
        return await this.getReactSpecOptions()
      case 'vue':
        return await this.getVueSpecOptions()
      default:
        throw new Error(`Unable to generate spec for ${this.options.framework.codeGenFramework}`)
    }
  }

  private getRelativePathToComponent (specParsedPath?: ParsedPath) {
    if (specParsedPath) {
      const componentPathRelative = path.relative(specParsedPath.dir, this.parsedPath.dir)

      const componentPath = path.join(componentPathRelative, this.parsedPath.base)

      return toPosix(componentPath.startsWith('.') ? componentPath : `./${componentPath}`)
    }

    return `./${this.parsedPath.base}`
  }

  private async getVueSpecOptions () {
    const componentName = this.buildComponentNameFromFilename(this.parsedPath.name)

View on GitHub (pinned to 0d85fdc912)

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.

Example fix

// before
const opts = await specOptions.getCodeGenOptions() // throws for angular/svelte

// after (caller-side guard before codegen)
const supported = ['react', 'vue']
if (framework && !supported.includes(framework.codeGenFramework)) {
  // scaffold manually or surface 'generation not supported' to the user
  return null
}
const opts = await specOptions.getCodeGenOptions()

Defensive patterns

Strategy: type-guard

Validate before calling

const SUPPORTED_CODEGEN: ReadonlyArray<Cypress.ResolvedComponentFrameworkDefinition['codeGenFramework']> = ['react', 'vue']

function canGenerateSpec(framework?: Cypress.ResolvedComponentFrameworkDefinition): boolean {
  return !!framework && SUPPORTED_CODEGEN.includes(framework.codeGenFramework)
}

// before calling getCodeGenOptions():
if (!canGenerateSpec(options.framework)) {
  // skip generation, scaffold manually, or show 'not supported' in UI
  return null
}

Type guard

function isSupportedCodeGenFramework(
  fw: string
): fw is 'react' | 'vue' {
  return fw === 'react' || fw === 'vue'
}

// usage
if (framework && !isSupportedCodeGenFramework(framework.codeGenFramework)) {
  // do not invoke the generator
}

Prevention

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.

When it happens

Trigger: 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.

Common situations: 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.

Related errors

AI-assisted analysis of cypress-io/cypress@0d85fdc912 (2026-08-12). Data as JSON: /api/errors/3807b70bfebf0c3c. Report an issue: GitHub.