看看以前的类似问题,似乎没有一个明确的答案。
这里发生了什么。我正在使用angular-cli工具构建一个angular2应用程序(运行beta 16,角度为2.0.1,路由器为3.0.1。
当我跑步" ng test"我的所有测试都通过了,期待我的app.component。 (ng服务工作正常等)
这里有一些代码:
app.module.ts
NULL
app.component.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.spec.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
}
app.component.html
/* 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();
}));
});
最后,这是我在运行" ng test"时得到的错误:
<app-header></app-header>
<router-outlet></router-outlet>
我尝试过很多不同的事情来防止这个错误,但是不能让这个错误停止发射!
对此有何想法?
编辑:我跟踪它到这个组件,我在构造函数中使用路由器:
header.component.ts
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)
那么,如何使用单元测试在该构造函数之前引导组件?
答案 0 :(得分:4)
这是因为您尝试使用RouterModule
进行测试。相反,您应该使用RouterTestingModule
并使用RouterTestingModule.withRoutes
import { RouterTestingModule } from '@angular/router/testing';
imports: [
// routing
RouterTestingModule.withRoutes(APP_ROUTES)
]