Angular 2 单元测试：无法读取未定义的属性“根”答案

【问题标题】：Angular 2 unit test : Cannot read property 'root' of undefinedAngular 2 单元测试：无法读取未定义的属性“根”
【发布时间】：2017-04-04 20:50:29
【问题描述】：

我的模板包含

<a [routerLink]="['/my-profile']" routerLinkActive="active">
    <i class="icon-user"></i>{{ 'MY_PROFILE' | translate }}
</a>

错误是由于routerLink 和routerLinkActive 指令造成的。

单元测试文件。

TestBed.configureTestingModule({
    imports: [
        MultilingualModule, CommonModule,
        RouterTestingModule.withRoutes([
            { path: 'my-profile', component: MockComponent },
            { path: 'change-password', component: MockComponent },
        ])
    ],
    schemas: [ NO_ERRORS_SCHEMA ],
    declarations: [TopNavigationBarComponent, TestComponent,MockComponent],
    providers: [
        { provide: LoginService, useValue: MockLoginService },
        { provide: Router, useClass: RouterStub }
    ]
});

【问题讨论】：

标签： angular unit-testing karma-jasmine

【解决方案1】：

您是否尝试将 APP_BASE_HREF 添加为提供程序？

{provide: APP_BASE_HREF, useValue : '/' }

【讨论】：

【解决方案2】：

问题在于您实际上是在覆盖路由器来进行测试，从而破坏了 routerLink。

换句话说：当使用RouterTestingModule 时，不要模拟Router。从您的代码中删除此行：

{ provide: Router, useClass: RouterStub }

你可以在这里看到关于如何对路由进行单元测试的很好的解释：Angular 2 Final Release Router Unit Test

【讨论】：

【解决方案3】：

我遇到了同样的错误，问题是：因为你已经有了declarations: [...TestComponent...]，所以没有必要添加providers。

你的单元测试文件应该是这样的：

TestBed.configureTestingModule({
  imports: [
    MultilingualModule, CommonModule,
    RouterTestingModule.withRoutes([
      {
        path: 'my-profile',
        component: MockComponent
      },
      {
        path: 'change-password',
        component: MockComponent
      },
    ])],
  schemas: [ NO_ERRORS_SCHEMA ],
  declarations: [TopNavigationBarComponent, TestComponent, MockComponent],
  providers: [
    { provide: LoginService, useValue: MockLoginService }
  ]
});

【讨论】：