Angular2 业力测试的新手 - 将 app.module 添加到 TestBed.configureTesting

Question

我正在使用带有角度材料的 angular-cli 和 angular2 v4.0

。家伙。。所有错误怎么办？ 我正在尝试学习业力，如果我运行 npm 测试，我会得到 34 次与材料相关的失败。例如

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'
Can't bind to 'md-menu-trigger-for' since it isn't a known property of 'button'
Can't bind to 'md-menu-trigger-for' since it isn't a known property of 'button'
If 'md-menu' is an Angular component, then verify that it is part of this module.

开和开

如何让棱角分明的物质与业力相得益彰？

我的应用程序运行良好，但如果达到业力..将是一场彻头彻尾的灾难。

谢谢

编辑：

我有很多！的声明，条目组件，导入和提供程序在我的@NgModule和app.module.ts文件中。 看来我必须在例如我的仪表板.component.spec.ts文件中添加每个文件。 我正在一个接一个地添加，并没有变得愚蠢。 我真的不想添加不相关的组件。 如何导入 app.module.ts 文件？ 我还有 50 个要进口...

这是我遇到的错误类型：

Failed: Uncaught (in promise): Error: Component BlankComponent is not part of any NgModule or the module has not been imported into your module.

如果我进口，那就太好了..错误只会消失，只是抱怨另一个。

如何简化？

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
import { MaterialModule, MdDatepickerModule, MdNativeDateModule } from '@angular/material';
import { LoggedinService } from '../loggedin.service';
import { BusyService } from '../busy.service';
import { DbBusyService } from '../dbbusy.service';

import { RouterModule } from '@angular/router';
import { ROUTES } from '../app.routes';
import { LoginComponent } from '../login/login.component';
import { CallbackComponent } from '../callback/callback.component';

describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardComponent,
LoginComponent,
CallbackComponent],
imports: [
MaterialModule,
RouterModule.forRoot(ROUTES, { useHash: true })
],
providers: [
LoggedinService,
BusyService,
DbBusyService
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

我瘦了这个，但我得到了以下错误。 所以我假设有一种方法可以导入app.module并添加到TestBed.configureTestingModule，但不清楚如何做。

import { AppModule } from '../app.module';
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardComponent,
LoginComponent,
CallbackComponent],
imports: [
MaterialModule,
RouterModule.forRoot(ROUTES, { useHash: true }),
AppModule
],
providers: [
LoggedinService,
BusyService,
DbBusyService
]
})
.compileComponents();
}));

失败：类型仪表板组件是 2 个模块声明的一部分：AppModule 和 DynamicTestModule！请考虑将 DashboardComponent 移动到导入 AppModule 和 DynamicTestModule 的更高模块。您还可以创建一个新的 NgModule 来导出并包含 DashboardComponent，然后将该 NgModule 导入 AppModule 和 DynamicTestModule 中。

Answer 1

所以我遇到了完全相同的问题，我发现这篇文章没有答案非常令人沮丧。我终于获得了测试功能，所以我将提交一个答案，显示为我解决了这个问题。 对于我的团队来说，这一直是几个角度版本的问题，但我们没有依赖测试，所以这被推到了我们修复列表的底部。

首先，我认为部分原因与Barreling有关。并非所有主要组件都作为声明添加到 app.modules.ts 文件中。因此，首先，我将具有相应 .spec 文件的所有组件文件作为声明添加到我的 app.module.ts 中

将具有规范文件的组件添加到我的app.module修复了我遇到的错误，如下所示：

失败：未捕获(承诺)：错误：组件空白组件不是任何 NgModule 的一部分，或者模块尚未导入到模块中。

这并没有解决我的所有问题，但是，我最终遇到了以下错误：

错误错误：

静态注入器错误[儿童插座上下文]： StaticInjectorError[ChildrenOutletContexts]: NullInjectorError: No provider for ChildrenOutletContexts!

这个问题的评论中提到了这个问题：

您可能需要从@angular/router/test 导入(在 ES6 和 Testbed.configureTestingModule 意义上)路由器测试模块

我更改了我的样板规范以使用路由器测试模块，这解决了无提供程序错误。

这是我的新规范文件的样子(通过呜！

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import {RouterTestingModule} from '@angular/router/testing';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
imports: [
RouterTestingModule
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});

所以现在在我的规范的声明部分，我只有我想要测试的组件，对于导入(样板)，我现在有路由器测试模块。