Angular2 2.0.0 组件单元测试导致错误:在注入路由器之前引导至少一个组件 [英] Angular2 2.0.0 Component Unit Test causes error: Bootstrap at least one component before injecting Router

查看:21
本文介绍了Angular2 2.0.0 组件单元测试导致错误:在注入路由器之前引导至少一个组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

看看之前的类似问题,似乎从来没有一个明确的答案.

Looking at previous similar questions, it doesn't seem that there was ever a clear answer for this.

这就是正在发生的事情.我正在使用 angular-cli 工具构建一个 angular2 应用程序(运行 beta 16,使用 angular 2.0.1 和路由器 3.0.1.

Here's what's happening. I'm building an angular2 app using the angular-cli tool (beta 16 running, with angular 2.0.1 and router 3.0.1.

当我运行ng test"时,我所有的测试都通过了,期待我的 app.component.(ng serve 工作正常等)

When I run "ng test" all my tests pass, expect my app.component. (ng serve is working fine etc)

这是一些代码:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HealthComponent } from './health/health.component';
import { MonitorModule } from './monitor/monitor.module';
import { PlanComponent } from './plan/plan.component';
import { ConfigureComponent } from './configure/configure.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TroubleshootComponent } from './troubleshoot/troubleshoot.component';
import { HeaderComponent } from './ui/header/header.component';
import { OnboardingModule } from './onboarding/onboarding.module';
import { routing, appRoutingProviders }  from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    MonitorModule,
    OnboardingModule
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    HealthComponent,
    PlanComponent,
    ConfigureComponent,
    DashboardComponent,
    TroubleshootComponent,
    HeaderComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent  {

}

app.component.spec.ts

/* tslint:disable:no-unused-variable */

import { TestBed, async } from '@angular/core/testing';
import { APP_BASE_HREF } from '@angular/common';
import { routing, appRoutingProviders }  from './app.routing';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './ui/header/header.component';
import { HealthComponent } from './health/health.component';
import { PlanComponent } from './plan/plan.component';
import { ConfigureComponent } from './configure/configure.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TroubleshootComponent } from './troubleshoot/troubleshoot.component';

describe('App: Ng2Test2', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent,
        HealthComponent,
        PlanComponent,
        ConfigureComponent,
        DashboardComponent,
        TroubleshootComponent
      ],
      imports: [
        routing
      ],
      providers: [
        appRoutingProviders,
        { provide: APP_BASE_HREF, useValue : '/' }
      ]
    });
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

app.component.html

  <app-header></app-header>

  <router-outlet></router-outlet>

最后,这是我运行ng test"时遇到的错误:

Finally, here's the error I'm getting when I run "ng test":

App: Ng2Test2 should create the app FAILED
    Failed: Error in ./AppComponent class AppComponent - inline template:2:2 caused by: Bootstrap at least one component before injecting Router.
    Error: Bootstrap at least one component before injecting Router.
        at setupRouter (webpack:///Users/jtaylor/Projects/hmng-angular/hmng-ng2/~/@angular/router/src/router_module.js:190:0 <- src/test.ts:29132:15)

我尝试了很多不同的方法来防止这个错误,但无法让这个停止触发!

I've tried a ton of different things to prevent this error, but can't get this one to stop firing!

对此有什么想法吗?

我追踪到这个组件,我在构造函数中使用路由器:

I tracked it down to this component, where I use router in my constructor:

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { AppComponent } from '../../app.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {

  section: any;
  // router: Router;
  // activateRoute: ActivatedRoute;

  constructor(
    public router: Router,
    public activatedRoute: ActivatedRoute
  ) {}

  ngOnInit() {
    this.router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        this.setActiveNavTab(e.url.replace(/^\/([^\/]*).*$/, '$1'));
      }
    });
  }

  setActiveNavTab(section: string) {
    this.section = section;
  }

}

那么,如何使用单元测试在构造函数之前引导组件?

So, how can I bootstrap a component before that constructor with the unit test?

推荐答案

这是因为您正在尝试使用 RouterModule 进行测试.相反,您应该使用 RouterTestingModule 并使用 RouterTestingModule.withRoutes

It's because you are trying to use the RouterModule for the test. Instead you should use the RouterTestingModule and add your routes with RouterTestingModule.withRoutes

import { RouterTestingModule } from '@angular/router/testing';

imports: [
  // routing
  RouterTestingModule.withRoutes(APP_ROUTES)
]

这篇关于Angular2 2.0.0 组件单元测试导致错误:在注入路由器之前引导至少一个组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆