Angular中tr标签属性组件@Input绑定单元测试失败求助

这个问题我之前也碰到过，核心原因是你在单元测试里创建组件的方式不对——因为你的ProductRowComponent是用属性选择器([app-product-row])绑定在<tr>上的，而直接用TestBed.createComponent(ProductRowComponent)会让Angular把它当成一个独立组件，而不是依附于<tr>的属性组件，所以测试环境会把[product]绑定误认为是<tr>本身的属性，自然就报错了。

下面给你两种可行的解决方法，第一种是日常测试中最常用的：

方法一：创建测试宿主组件 #

我们可以定义一个临时的宿主组件，在它的模板里以正确的方式使用<tr app-product-row [product]="...">来渲染目标组件，这样测试环境就能正确识别组件的@Input属性了。

修改后的完整单元测试代码如下：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProductRowComponent } from './product-row.component';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';

// 定义测试用的宿主组件
@Component({
  template: `<tr app-product-row [product]="testProduct"></tr>`
})
class TestHostComponent {
  // 模拟测试用的product数据
  testProduct = { id: 1, name: 'Test Product' };
}

describe('ProductRowComponent', () => {
  let hostFixture: ComponentFixture<TestHostComponent>;
  let component: ProductRowComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductRowComponent, TestHostComponent ] // 同时声明宿主组件和目标组件
    })
    .compileComponents();
  }));

  beforeEach(() => {
    hostFixture = TestBed.createComponent(TestHostComponent);
    // 通过宿主组件的fixture找到目标组件实例
    const productRowEl = hostFixture.debugElement.query(By.directive(ProductRowComponent));
    component = productRowEl.componentInstance;
    hostFixture.detectChanges();
  });

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

  // 新增测试：验证@Input是否正确接收值
  it('should receive product via @Input', () => {
    expect(component.product).toEqual(hostFixture.componentInstance.testProduct);
  });
});

方法二：手动挂载组件到元素 #

如果你不想创建额外的宿主组件，也可以手动创建<tr>元素，然后通过ComponentFactoryResolver把组件挂载到这个元素上：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProductRowComponent } from './product-row.component';
import { ComponentFactoryResolver, ElementRef } from '@angular/core';

describe('ProductRowComponent', () => {
  let component: ProductRowComponent;

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

  beforeEach(() => {
    // 创建<tr>元素
    const trElement = document.createElement('tr');
    // 获取组件工厂
    const componentFactory = TestBed.inject(ComponentFactoryResolver).resolveComponentFactory(ProductRowComponent);
    // 创建组件实例并挂载到<tr>上
    const componentRef = componentFactory.create(TestBed.inject(ElementRef).injector, [], trElement);
    component = componentRef.instance;
    // 设置@Input值
    component.product = { id: 1, name: 'Test Product' };
    componentRef.changeDetectorRef.detectChanges();
  });

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

  it('should have product set via @Input', () => {
    expect(component.product).toEqual({ id: 1, name: 'Test Product' });
  });
});

为什么原来的测试会失败？ #

当你用TestBed.createComponent(ProductRowComponent)时，Angular会直接创建一个独立的组件实例，不会把它和<tr>元素关联起来。此时测试环境解析组件的使用方式时，无法识别[product]是组件的输入属性，反而会认为是<tr>元素的原生属性——而<tr>本身并没有product属性，所以就抛出了Can't bind to 'product' since it isn't a known property of 'tr'的错误。

只要让组件在测试环境中以**正确的方式（作为<tr>的属性组件）**被渲染，就能解决这个问题啦。

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