Angular 组件单元测试中未定义的服务答案

【问题标题】：Service Undefined in Angular Component Unit TestingAngular 组件单元测试中未定义的服务
【发布时间】：2018-09-02 09:48:35
【问题描述】：

我正在使用异步管道将 observable 导入到组件中，但是当我将该组件包含在父组件单元测试中时，它会中断并说服务未定义。或者更准确地说是TypeError: Cannot read property 'subscribe' of undefined。有更多单元测试经验的人可以帮我看看这个吗？谢谢！

我想知道这是否与我将 DataService 重命名为数据有关，但这对我来说没有意义。

这是我的规格：

describe('SidenavComponent', () => {
  let component: SidenavComponent;
  let fixture: ComponentFixture<SidenavComponent>;

  const dataServiceStub = {
    partners$: Observable.of(['white-label']),
  };

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        imports: [SharedModule, MatSidenavModule],
        declarations: [
          SidenavComponent,
          Component({
            template: '',
            selector: 'app-partner-select',
            inputs: ['partners', 'selectedPartner', 'opened'],
            outputs: ['openedChange'],
          })(class PartnerSelectComponent {}),
        ],
        providers: [{ provide: DataService, useValue: dataServiceStub }],
      }).compileComponents();
    }),
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(SidenavComponent);
    console.log('breaks before this', fixture);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('exists!', () => {
    expect(component).toBeTruthy();
  });
});

组件类中的相关javascript：

  constructor(private data: DataService) {}

  get partners$() {
    return this.data.partners$;
  }

以及相关的html

<app-partner-select
  [partners]="partners$ | async"
  [selectedPartner]="'white-label'"
  [(opened)]="partnerSelectOpen"
></app-partner-select>

【问题讨论】：

考虑到它已经完成如上所示，Cannot read property 'subscribe' of undefined 显然是指合作伙伴 $ 而不是其他任何东西，我不明白这怎么可能，它应该按预期工作问题不包含stackoverflow.com/help/mcve 。不清楚 DataService 是模块提供者而不是组件提供者。考虑为用户提供一种方法来复制问题。
你我对MCV的定义肯定不同。复制这个应该很容易。我会在 Stackblitz 上做，但看起来他们还没有单元测试功能。父组件有一个服务，子组件使用异步管道从该服务消费一个 observable。很难比这更简单。
MCVE 意味着您提供完整的代码来复制问题。您没有提供完整的组件，只提供了其中的一部分。测试不需要特殊处理，参见这个 Angular/Jasmine plunker 示例plnkr.co/edit/3jh4Z6j2I7KPw9uAk9nE?p=preview
组件中没有其他内容。无论如何，我发现问题出在子组件和以某种方式声明的方式上。它与partners$ 没有任何关系，应该很明显。
很高兴你解决了这个问题。

标签： angular unit-testing karma-jasmine angular-services

【解决方案1】：

我从声明的模拟组件中删除了输出，现在它可以正常工作了！

【讨论】：