如何测试带必填@Input的Angular组件？解决测试报错问题

问题根源 #

你的组件选择器定义为app-component[required]，这要求组件的宿主元素必须携带required属性才能被正确渲染。而当前测试代码通过TestBed.createComponent(ComponentComponent)创建组件时，Angular生成的默认宿主元素不包含required属性，因此触发了选择器匹配失败的错误。

解决方法 #

可以通过以下两种方式修正测试代码：

方法1：手动为宿主元素添加required属性

在创建组件实例后，直接给宿主DOM元素添加required属性，确保匹配组件选择器：

describe('ComponentComponent', () => {
  let component: ComponentComponent;
  let fixture: ComponentFixture<ComponentComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ComponentComponent ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(ComponentComponent);
    // 为宿主元素添加required属性，满足选择器要求
    fixture.nativeElement.setAttribute('required', 'foo');
    component = fixture.componentInstance;
    component.required = 'foo';
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

方法2：通过自定义模板渲染组件

在测试模块中直接使用模板来渲染组件，确保模板中的组件标签携带required属性：

describe('ComponentComponent', () => {
  let component: ComponentComponent;
  let fixture: ComponentFixture<ComponentComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ComponentComponent ],
      // 使用模板渲染符合选择器要求的组件
      template: `<app-component required="foo"></app-component>`
    })
    .compileComponents();

    fixture = TestBed.createComponent(ComponentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

补充说明 #

你之前直接给组件实例赋值component.required = 'foo'无法解决问题，是因为Angular在实例化组件前会先检查宿主元素是否匹配组件选择器，这个检查逻辑优先于实例属性赋值，因此必须先让宿主元素满足选择器的属性要求。

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