Question

我在 tr 标记上使用名为 app-product-row 的属性选择器组件，并在@Input中传递产品（）如下;

类

@Component({
  selector: '[app-product-row]',
  templateUrl: './product-row.component.html',
  styleUrls: ['./product-row.component.scss']
})
export class ProductRowComponent {
  @Input() public product = null;
}

测试床

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ProductRowComponent } from './product-row.component';

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductRowComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

标记

<tr *ngFor="let product of searchResults"
    [product]="product"
    (showPipelineModalChange)="onShowPipelineModalChange($event)"
    app-product-row>
</tr>

代码在 ng serve 上成功编译，并且所有内容在浏览器上按预期工作，但是单元测试正在抛出

Chrome 63.0.3239 (Mac OS X 10.13.3)
Can't bind to 'product' since it isn't a known property of 'tr'

我的实现从Angular2 table rows as component获得灵感，但在该示例中 @Input（）似乎没有使用，也没有提及单元测试。

有人可以指出我正确的方向吗？

Answer 1

如果您未在TestBed中声明该组件，则通常会发生此错误。从本质上讲，Angular不会将app-product-row视为特殊内容，就像您在应用中使用它而不将其包含在@NgModule中一样。在测试中尝试添加：

TestBed.configureTestingModule({
   declarations: [ProductRowComponent]
})

每个TestBed就像一个迷你模块，在某种意义上你需要声明你想要测试的组件/指令。

在此处详细了解设置：https://angular.io/guide/testing#test-a-component

Answer 2

我收到了同样的错误

Chrome 77.0.3865 (Windows 10.0.0) MyResultsComponent should create FAILED
    Can't bind to 'entry' since it isn't a known property of 'tr'. ("  <tr my-result [ERROR ->][entry]="entry" *ngFor="let entry of entries"><tr>"):

由于声明中未包含属性选择器组件MyResultComponent

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

在声明中添加MyResultComponent解决了测试失败。

MyResults组件打字稿：

import { Component, OnInit } from '@angular/core';

class Entry {
  name: string;
  time: string;
}

@Component({
  selector: 'my-results, [my-results]',
  templateUrl: './my-results.component.html',
  styleUrls: ['./my-results.component.scss']
})
export class MyResultsComponent implements OnInit {

  entries: Entry[] = [
    { name: 'Entry One', time: '10:00'},
    { name: 'Entry Two', time: '10:05 '},
    { name: 'Entry Three', time: '10:10'},
  ];

  constructor() { }

  ngOnInit() {
  }
}

MyResults组件模板：

  <tr my-result [entry]="entry" *ngFor="let entry of entries"><tr>

更新了MyResults个组件测试规范声明：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MyResultsComponent } from './my-results.component';
import { MyResultComponent } from './../my-result/my-result.component';

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(MyResultsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

属性组件MyResult打字稿：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: '[my-result]',
  templateUrl: './my-result.component.html',
  styleUrls: ['./my-result.component.scss']
})
export class MyResultComponent implements OnInit {

  @Input() entry: any;

  constructor() { }

  ngOnInit() {
  }
}

属性组件MyResult模板：

  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>

Answer 3

一位前端开发者为我解决了这个问题！我不得不在父规范中声明子组件，如此

TestBed.configureTestingModule({
  declarations: [
    SearchResultsListingComponent,
    ProductRowComponent
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();

对于tr html标记的单元测试失败的属性组件的@Input（）绑定

3 个答案: