Unit testing 具有提供者依赖关系的Angular2测试组件

我有一个简单的angular2组件，定义如下。我想用karma和jasmine创建一个单元测试来运行这个组件

@Component({
selector: 'property',
template: require('./property.component.html'),
directives: [Panel],
providers: [ConfigService]});

export class PropertyComponent {
config:any;

constructor(config:ConfigService) {
    this.config = config.getConfig();
}
}

这是我的测试规范文件

describe('property component', () => {

it('should have property page title', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(PropertyComponent).then((fixture) => {
  let propertyComp = fixture.componentInstance,
      element = fixture.nativeElement;

  expect(element.querySelector('h1').innerText).toBe('property page');
      });
    }));
  })

但是我得到了一个奇怪错误的列表。。。我猜这是由于PropertyComponent中的ConfigService提供程序造成的，因为当我删除提供程序依赖项时，它通过了

有人知道如何处理依赖项提供者吗

谢谢

错误：

_instantiateProvider@angular2-seed/config/spec-bundle.js:23435:38
  _new@angular2-seed/config/spec-bundle.js:23424:42
  getObjByKeyId@angular2-seed/config/spec-bundle.js:22937:38
  _getByKeyDefault@angular2-seed/config/spec-bundle.js:23641:51
  _getByKey@angular2-seed/config/spec-bundle.js:23587:42
  _getByDependency@angular2-seed/config/spec-bundle.js:23573:35
  _instantiate@angular2-seed/config/spec-bundle.js:23463:53
  _instantiateProvider@angular2-seed/config/spec-bundle.js:23435:38
  _new@angular2-seed/config/spec-bundle.js:23424:42
  instantiateProvider@angular2-seed/config/spec-bundle.js:22924:35
  init@angular2-seed/config/spec-bundle.js:34694:44
  AppElement@angular2-seed/config/spec-bundle.js:34371:33
  viewFactory_HostPropertyComponent0
  createRootHostView@angular2-seed/config/spec-bundle.js:35741:48

在这种情况下，您需要使用：

import {beforeEachProviders, describe, it, expect} from 'angular2/testing';
//...other imports... 

describe('property component', () => {

  beforeEachProviders(()=> [
      ConfigService, //if you don't need to mock 
      provide(ConfigService, {useClass:MockConfigService}) // more typical
  ]);

  it('should have property page title', injectAsync([TestComponentBuilder], (tcb) => {
    return tcb.createAsync(PropertyComponent).then((fixture) => {
      //expectations...
    });
  }));
})

注意，您需要从

angular2/testing

导入angular的补丁

描述，它，expect

功能以及每个提供程序之前的

。我之所以强调这一点，是因为很容易忘记这样做，这会导致失败，并产生相当不直观的消息