失败：模板解析错误：无法绑定到 'routerLink'，因为它不是 'a' 的已知属性。 ("s="导航栏-导航" >

Question

在 angular 中开始测试，但这是我在运行 ng 测试后第一次得到的结果。我还没有添加任何测试

 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

失败：模板解析错误：无法绑定到 'routerLink'，因为它不是 'a' 的已知属性。 ("s="导航栏-导航" >

Failed: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("s="navbar-nav" >

unit-testing

karma-jasmine

angular

失败：模板解析错误：无法绑定到 'routerLink'，因为它不是 'a' 的已知 属性。 ("s="导航栏-导航" >

Failed: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("s="navbar-nav" >

unit-testing

karma-jasmine

angular

失败：模板解析错误：无法绑定到 'routerLink'，因为它不是 'a' 的已知属性。 ("s="导航栏-导航" >