angular - angular2 karma 测试的新手 - 添加 app.module 到 TestBed.configureTestingModule

Question

我正在使用带有 Angular Material 的 angular2 v4.0 的 angular-cli。

伙计们..所有的错误是怎么回事？我正在尝试学习 karma ，如果我运行 npm 测试，我会得到 34 个与 Material 相关的失败。

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.

持续不断

如何使 Angular Material 与 karma 相得益彰？

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

谢谢

编辑:

我有很多! app.module.ts 文件中我的@NgModule 中的声明、entryComponents、导入和提供程序。看来我必须在例如中添加每一个我的 dashboard.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();
  }));

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

Answer 1

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

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

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

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

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

ERROR Error: StaticInjectorError[ChildrenOutletContexts]: StaticInjectorError[ChildrenOutletContexts]: NullInjectorError: No provider for ChildrenOutletContexts!

这个问题的评论中提到的内容解决了这个问题:

You likely need to import (in both the ES6 and Testbed.configureTestingModule sense) RouterTestingModule from @angular/router/testing

我更改了我的样板规范以使用 RouterTestingModule，它解决了无提供商错误。

这是我的新规范文件的样子(它通过了 woot!):

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();
  }));
});

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