Angular 2单元测试beforeEachProvider无法注入服务

Question

我正在尝试在Angular 2中测试我的组件，但是当组件的服务不在其提供程序中时遇到了问题。

import {Component} from 'angular2/core';
import {ServiceName} from '../../services/ServiceName';

@Component({
  selector: 'component-name',
  template: `
    <div></div>
  `
})

export class ComponentName {    
  constructor(private ServiceName: ServiceName) {
  }
}

以下是我的测试：

import {ComponentName} from '<path>';
import {ServiceName} from '<path>';

import {
  iit,
  it,
  ddescribe,
  describe,
  expect,
  inject,
  injectAsync,
  TestComponentBuilder,
  beforeEachProviders,
  fakeAsync,
  tick,
  setBaseTestProviders
} from 'angular2/testing';

beforeEachProviders(() => [
  ServiceName
]);

import {
  TEST_BROWSER_PLATFORM_PROVIDERS,
  TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';

setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);

describe('ServiceName', () => {

  it('should have name property set', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(ComponentName).then((fixture) => {
      fixture.debugElement.componentInstance.isPanelActive = true;
      fixture.detectChanges();

      var compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('a.yes')).toContainText('Something');
    });
  }));

});

我收到的错误信息是：

 Failed: No provider for ServiceName! (ComponentName -> ServiceName)
Error: DI Exception

我尝试使用overrideProvide方法，但它不起作用。我还尝试在测试中创建一个TestComponent，并将提供程序与ComponentName指令一起传递。

有人有任何想法吗？是否不可能通过引导文件引导服务而不是在@Component中使用提供程序？我认为这就是beforeEachProviders的全部意义。

- alik

---

你尝试过将 beforeEachProviders() {} 移动到 describe('xxx', () { ...}) 中吗？ - Günter Zöchbauer

我做了，没有任何区别。 - alik

ServiceName жІЎжңүд»»дҪ•жһ„йҖ еҮҪж•°еҸӮж•°пјҹ - Günter Zöchbauer

ServiceName有一个构造函数。 - alik

当然，问题是构造函数是否有参数。 - Günter Zöchbauer

不，它没有任何参数。 - alik

Answer 1

问题已经解决了。原因是System.js的配置问题，没有给出其他错误信息。由于有许多情况，我怀疑在配置块内使用包是导致问题的原因。我重新配置了我的karma和test-main文件，按照以下步骤进行：

https://github.com/mgechev/angular2-seed

谢谢。

- alik

---

你能分享一下问题吗？我有和你一样的问题，卡住了。 - Vassilis Pits

Answer 2

在测试中，似乎需要明确定义注入器如何实例化给定的令牌。为此，请使用provide函数：

beforeEachProviders(() => [
  provide(ServiceName, {useClass: ServiceName})
]);

- RomanHotsiy

---

你能否创建一个最小可重现的示例（例如在Github上的测试存储库）？因为对我来说，你的代码会抛出完全相同的错误，但使用“provide”一切都正常。 - RomanHotsiy

Answer 3

我遇到了同样的问题，并且通过这个provide函数的实现解决了它：

beforeEachProviders(() => [
  return provide(ServiceName, {useClass: ServiceName})
]);

你需要确保 return 提供者，否则它不会被识别。

- yammerade