TypeError：无法读取未定义的属性“订阅”（角度单元测试）答案

【问题标题】：TypeError: Cannot read property 'subscribe' of undefined (Angular Unit-Test)TypeError：无法读取未定义的属性“订阅”（角度单元测试）
【发布时间】：2019-08-06 10:01:53
【问题描述】：

我有一个结构如下的简单测试：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BreadcrumbsComponent } from './breadcrumbs.component';
import { RouterTestingModule } from '@angular/router/testing';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { BreadcrumbsService } from './breadcrumbs.service';
import { multiTranslateHttpLoaderFactory } from 'app/app.component';

fdescribe('BreadcrumbsComponent', () => {
  let component: BreadcrumbsComponent;
  let translateService: TranslateService;
  let fixture: ComponentFixture<BreadcrumbsComponent>;
  let translateServiceStub: Partial<TranslateService>;


let translateServiceStub: Partial<TranslateService>;

translateServiceStub = {
  getBrowserLang: () => {
    return 'de';
  },
  onLangChange: new EventEmitter(),
};

breadcrumbsServiceStub = {
  onUpdateRequest: new Subject(),
  updateBreadcrumbs: () => {
  }
};

  beforeEach((() => {
    TestBed.configureTestingModule({
      declarations: [BreadcrumbsComponent],
      imports: [
        RouterTestingModule,
        HttpClientTestingModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: multiTranslateHttpLoaderFactory,
            deps: [HttpClient]
          }
        }),
      ],
      providers: [
        {provide: TranslateService, useValue: translateServiceStub},
        {provide: BreadcrumbsService, useValue: breadcrumbsServiceStub},
      ]
    });
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BreadcrumbsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

目前抛出此错误，我无法处理：

TypeError: 无法读取未定义的属性“订阅”

这是我的课程，ngOnInit 方法中的一行导致此错误：

export class BreadcrumbsComponent implements OnInit {

  breadcrumbs: Breadcrumb[] = [];

  constructor(private router: Router,
              private activeRoute: ActivatedRoute,
              private translate: TranslateService,
              private breadcrumbsService: BreadcrumbsService) {
  }

  ngOnInit() {
    this.translate.onLangChange.subscribe(() => this.identifyRoute());
  }

...

我在这里做错了什么？要么。有没有办法绕过错误或模拟这条线以便测试通过？我真的不知道如何在我的测试中模拟这条线。

【问题讨论】：

您的存根与它所存根的服务不匹配，onLangChange 确实未定义。
如何模拟 onLangChange。它是翻译服务包的一部分，定义如下： readonly onLangChange: EventEmitter;我没有在我的测试中模拟这个的想法。
你模拟它就像你模拟TranslateService，getBrowserLang的other部分一样；您将测试替身定义为该服务的存根的一部分。要么是实际的可观察/事件发射器，要么只是具有 subscribe 具有适当行为的方法的东西。
我将事件发射器包含在我的存根中并订阅了它。但是，这也会引发 IDE 中的错误。
当您说“IDE 中的错误” 时，您是什么意思？实际上停止了您的工具工作？显示警告？什么警告？它比显然未定义的事情更糟糕吗？

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

【解决方案1】：

你可以试试：

import { of } from 'rxjs';

translateServiceStub = {
    getBrowserLang: () => {
       return 'de';
    },
    onLangChange: of({
       // whatever object is expected
     }),
 };

【讨论】：