undefined不是对象（正在评估“ config.forEach”）-Angular2路由测试

Question

我是Angular2中的一名新手，尤其是在Testing中。 我在网上搜索了一个解决方案，但是有太多旧的代码示例不再起作用。 所以我来这里问你。

当我用“业力测试”运行测试时。 我收到以下错误：

错误：./ NavbarItemComponent类NavbarItemComponent中的错误-内联模板：1：1，原因是：config / karma / karma-test-shim.js中的undefined不是对象（评估'config.forEach'）（第20623行）

app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { NavbarVerticalComponent } from './navbar-vertical/navbar-vertical.component';
import { NavbarItemComponent } from './navbar-item/navbar-item.component';
import { Router } from '@angular/router'
import { RouterTestingModule } from '@angular/router/testing';

class MockRouter extends Router {
  navigate = jasmine.createSpy('navigate');
  routerState: RouterState;
}

describe('App', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({ 
    declarations: [AppComponent, NavbarVerticalComponent, NavbarItemComponent ],
    providers: [
      { provide: Router, useClass: MockRouter  }
    ],
    imports: [RouterTestingModule]
    });
  });

  it ('should work', () => {
    let fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
  });

});

Answer 1

我使用https://angular.io/docs/ts/latest/guide/testing.html#!#router-outlet-component中的router-stubs.ts文件

// export for convenience.
export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router';

import { Component, Directive, Injectable, Input } from '@angular/core';
import { NavigationExtras } from '@angular/router';

@Directive({
  selector: '[routerLink]',
  host: {
    '(click)': 'onClick()'
  }
})
export class RouterLinkStubDirective {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  onClick() {
    this.navigatedTo = this.linkParams;
  }
}

@Component({selector: 'router-outlet', template: ''})
export class RouterOutletStubComponent { }

@Injectable()
export class RouterStub {
  navigate(commands: any[], extras?: NavigationExtras) { }
}


// Only implements params and part of snapshot.params
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class ActivatedRouteStub {

  // ActivatedRoute.params is Observable
  private subject = new BehaviorSubject(this.testParams);
  params = this.subject.asObservable();

  // Test parameters
  private _testParams: {};
  get testParams() { return this._testParams; }
  set testParams(params: {}) {
    this._testParams = params;
    this.subject.next(params);
  }

  // ActivatedRoute.snapshot.params
  get snapshot() {
    return { params: this.testParams };
  }
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

更新的app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { NavbarVerticalComponent } from './navbar-vertical/navbar-vertical.component';
import { NavbarItemComponent } from './navbar-item/navbar-item.component';
import { Router } from '@angular/router'
import { RouterOutletStubComponent, RouterLinkStubDirective } from './testing/router-stubs';

describe('App', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({ 
      declarations: [AppComponent, 
                     NavbarVerticalComponent, 
                     NavbarItemComponent,
                     RouterLinkStubDirective,
                     RouterOutletStubComponent]
    });
  });

  it ('should work', () => {
    let fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
  });

});

现在可以使用了。