如何在Jasmine测试用例中覆盖响应式表单控件的可选链操作符

问题背景 #

在Angular响应式表单中，使用可选链操作符?.获取控件值的代码如下：

submit() { 
  let name = this.form.get('name')?.value 
}

尝试通过设置表单值为null编写测试用例，但无法覆盖可选链的逻辑：

it('makes expected calls: show unsaved message', () => { 
  const formData = { name: null, description: null }; 
  component.form.setValue(formData); 
  component.onSubmit(); 
});

解决方案 #

你之前的测试逻辑有误：设置name字段的值为null，只是让控件的value为null，但this.form.get('name')仍然会返回一个FormControl实例，并不会触发?.的短路逻辑。要覆盖可选链的分支，需要让form.get('name')返回null或undefined。

场景1：模拟表单不存在对应控件 #

直接初始化不包含name的表单，或者动态移除该控件，让get('name')返回null：

it('should handle missing name control with optional chain', () => {
  // 初始化表单时仅包含description控件
  component.form = new FormGroup({
    description: new FormControl(null)
  });
  
  component.onSubmit();
  
  // 断言逻辑：比如name变量为undefined，或对应业务行为
  expect(component.name).toBeUndefined();
});

场景2：通过Spy模拟get方法返回null #

使用Jasmine的spyOn直接让form.get方法返回null：

it('should handle null control from get method', () => {
  // 拦截form.get方法，当传入'name'时返回null
  spyOn(component.form, 'get').withArgs('name').and.returnValue(null);
  
  component.onSubmit();
  
  // 断言相关逻辑
  expect(component.name).toBeUndefined();
});

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