Angular TypeError:无法读取属性'；订阅'；未定义的（角度单位测试）

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

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();
  });
});

我做错了什么？或有没有办法绕过错误或模拟这一行以便测试通过？我真的不知道如何在测试中模仿这句话。

你能试试吗：

import { of } from 'rxjs';

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

---

您的存根与它的存根不匹配，

onLangChange

确实未定义。如何模拟onLangChange。它是translate服务包的一部分，定义如下：readonly onLangChange:EventEmitter；在我的测试中，我没有一个好主意来模拟它。你模拟它的方式与你模拟

TranslateService

，

getBrowserLang

的另一部分的方式相同；您定义了一个双重测试作为该服务存根的一部分。要么是一个实际的可观察/事件发射器，要么就是一个具有适当行为的

subscribe

方法的东西。我将事件发射器包括在存根中并订阅了它。然而，这也会在IDE中引发一个bug。当你说“IDE中的bug”时，你是什么意思？你的工具真的停止工作了吗？给你一个警告？什么警告？这比明显未定义的东西更糟糕吗？

import { of } from 'rxjs';

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