如何在Cypress的Angular组件测试中设置Input Signal？类型错误求解

Angular的Input Signal是声明式的输入定义，不是可直接赋值的属性。测试时不能直接给Signal对象传值，而是要像处理普通@Input()属性那样传入原始值，Cypress的cy.mount会自动完成Signal的绑定。

错误原因 #

你碰到的Type 'number' is not assignable to type 'InputSignal'错误，是因为直接把数字传给了对应Signal的属性位置，但组件里定义的auditId和paragraphId是Input Signal实例，不是普通的输入属性字段。

解决方法 #

1. 组件的Input Signal定义参考 #

先确保组件里的定义是标准的Input Signal写法：

import { input } from '@angular/core';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html'
})
export class TargetComponent {
  auditId = input.required<number>();
  paragraphId = input.required<number>();
}

2. Cypress测试中正确传值 #

使用cy.mount时，直接在componentProperties里传入原始数值就行，不需要操作Signal对象，Cypress会自动通过Angular的变更检测把值绑定到Input Signal上：

cy.mount(TargetComponent, {
  componentProperties: {
    auditId: 1,
    paragraphId: 1
  }
});

3. 验证传值是否成功 #

如果要确认值是否正确传入，可以在测试中访问组件实例的Signal并调用它获取值：

cy.mount(TargetComponent, {
  componentProperties: {
    auditId: 1,
    paragraphId: 1
  }
}).then(({ component }) => {
  expect(component.auditId()).to.equal(1);
  expect(component.paragraphId()).to.equal(1);
});

核心说明 #

• Input Signal本质是封装了输入值的读取器，Angular会自动处理外部传入值到Signal的绑定，完全不需要手动给Signal赋值。
• Cypress的cy.mount对Angular Input Signal有完整支持，只要按照普通@Input()的传值方式操作，底层会自动适配Signal的绑定逻辑。

内容的提问来源于stack exchange，提问作者narayan nyaupane