失败：模板解析错误：无法绑定到“ routerLink”，因为它不是“ a”的已知属性。 （“ s =” navbar-nav“>

Question

开始进行角度测试，但这是我第一次运行ng test之后得到的。我还没有添加任何测试

 Failed: Template parse errors:
    Can't bind to 'routerLink' since it isn't a known property of 'a'. ("s="navbar-nav" >
                <li class="list-item" style="margin-top:20px;">
                        <a [ERROR ->][routerLink]="[{ outlets: {rightdiv: ['addProduct'] } }]" skipLocationChange>
                           "): ng:///DynamicTestModule/ManageProductsComponent.html@17:23
    Can't bind to 'icon' since it isn't a known property of 'fa-icon'.
    1. If 'fa-icon' is an Angular component and it has 'icon' input, then verify that it is part of this module.
    2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("]="[{ outlets: {rightdiv: ['addProduct'] } }]" skipLocationChange>
                            <fa-icon [ERROR ->][icon]="faBook" size="2x" class="icon"></fa-icon>
                            Add Product
                   "): ng:///DynamicTestModule/ManageProductsComponent.html@18:33
    'fa-icon' is not a known element:
    1. If 'fa-icon' is an Angular component, then verify that it is part of this module.
    2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("outerLink]="[{ outlets: {rightdiv: ['addProduct'] } }]" skipLocationChange>
                            [ERROR ->]<fa-icon [icon]="faBook" size="2x" class="icon"></fa-icon>
                            Add Product
          "): ng:///DynamicTestModule/ManageProductsComponent.html@18:24
    Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
                </li>
            <li class="list-item" style="margin-top: 10px;">
                <a [ERROR ->][routerLink]="[{ outlets: {rightdiv: ['']} }]" skipLocationChange>
                <fa-icon [icon]="faEdi"): ng:///DynamicTestModule/ManageProductsComponent.html@23:15
    Can't bind to 'icon' since it isn't a known property of 'fa-icon'.
    1. If 'fa-icon' is an Angular component and it has 'icon' input, then verify that it is part of this module.
    2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("         <a [routerLink]="[{ outlets: {rightdiv: ['']} }]" skipLocationChange>
                <fa-icon [ERROR ->][icon]="faEdit" size="2x" class="icon"></fa-icon>
                    Manage Products
                </a>

Answer 1

基本创建单元测试默认包含在您的spec.ts文件中。

只要有路由器链接，就需要在导入部分添加以下内容：

imports: [ RouterTestingModule ]

如果您想对模拟路由进行更具体的测试，则可以这样配置

describe('component: TestComponent', function () {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        CommonModule,
        RouterTestingModule.withRoutes([
         { path: '', component: OtherTestComponent }
        ])
      ],
      declarations: [ TestComponent, OtherTestComponent, MockFaIconComponent  ]
    });
  });
});

您还需要声明fa-icon组件或包含它的模块或模拟fa-icon组件

@Component({
  selector: 'fa-icon',
  template: '<p>Mock fa icon Component</p>'
})
class MockFaIconComponent {
   @Input()
   icon: any;
}

还有一个模拟组件实现，可以使您的生活更轻松。 ng-mocks