Angular组件Jest测试遇TS18047错误：对象可能为null

核心问题分析 #

你的组件中email getter返回AbstractControl | null，TypeScript的严格空值检查会阻止你直接调用控件方法；另外你预期spectator.component.email等于false的逻辑有误——email是表单控件对象，不是布尔值，应该通过其valid或invalid属性验证状态。

具体解决方法 #

1. 先做空值校验（类型安全首选） #

在调用控件方法前，先判断控件是否存在，让TypeScript确认空值风险已排除：

const emailControl = spectator.component.email;
if (emailControl) {
  emailControl.setValue({ email: "invalidemail" });
  // 无效邮箱对应控件状态应为invalid（true），或valid（false）
  expect(emailControl.invalid).toBe(true);
  // 也可以写 expect(emailControl.valid).toBe(false);
}

2. 使用非空断言操作符（!） #

如果你能确定测试场景下email控件必定存在（比如组件初始化时已创建该控件），可以用!告诉TypeScript该值不可能为null：

spectator.component.email!.setValue({ email: "invalidemail" });
expect(spectator.component.email!.invalid).toBe(true);

3. 结合断言强制类型转换 #

先通过断言确保控件不为null，再将其转换为AbstractControl类型：

expect(spectator.component.email).not.toBeNull();
const emailControl = spectator.component.email as AbstractControl;
emailControl.setValue({ email: "invalidemail" });
expect(emailControl.invalid).toBe(true);

纠正错误用法 #

你尝试的spectator.component.email("invalidemail")是错误的——email是getter返回的表单控件对象，不是可调用函数，必须通过控件的setValue方法设置值。

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