Angular Jest测试：继承@Input()变量在ngOnInit中被置空的问题

问题根源 #

你的组件变量同时被标记为父组件的@Input()输入属性，在测试环境中，Angular的变更检测会在构造函数执行后、ngOnInit执行前处理未传入值的@Input()属性：如果没有显式提供输入值，框架会自动将该变量设为null，直接覆盖你在子组件构造函数中初始化的内容。

解决方案 #

针对这种“同一变量既支持内部初始化，也支持外部传入”的场景，推荐以下几种处理方式：

1. 给@Input()设置默认值 #

修改父组件中@Input()的定义，将默认值设为你原本在子组件构造函数中初始化的表单结构。这样当外部未传入值时，会使用默认值而非null：

// 父组件代码
import { FormGroup, FormControl } from '@angular/forms';

@Input() formGroup: FormGroup = new FormGroup({
  // 填写你原本在子组件构造函数中定义的表单控件
  username: new FormControl(''),
  email: new FormControl('')
});

2. 在ngOnInit中补全初始化逻辑 #

如果不想修改父组件的@Input()定义，可以在子组件的ngOnInit钩子中判断变量状态，若为null则重新初始化：

// 子组件代码
ngOnInit(): void {
  if (!this.formGroup) {
    this.formGroup = new FormGroup({
      // 初始化表单结构
      username: new FormControl(''),
      email: new FormControl('')
    });
  }
}

3. 测试时显式传入输入值 #

在调用MockRender测试组件时，主动传入该@Input()的初始值，避免Angular自动将其设为null：

// 测试代码
import { MockRender } from 'ng-mocks';
import { MyComponent } from './my.component';
import { FormGroup, FormControl } from '@angular/forms';

describe('MyComponent', () => {
  it('should keep formGroup initialized', () => {
    MockRender(MyComponent, {
      formGroup: new FormGroup({
        username: new FormControl(''),
        email: new FormControl('')
      })
    });
    // 后续断言逻辑
  });
});

原理补充 #

Angular组件初始化的完整流程是：构造函数执行 → 处理@Input()绑定 → 执行ngOnInit。在测试环境中，若未给@Input()传值，框架会将其重置为null，这是为了模拟“父组件未提供该输入”的真实场景，但恰好和你内部初始化的逻辑冲突。

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