时间戳

首页 > 解决方案 > TypeError：ApplicationServiceMock.application$.pipe 不是函数

angular - TypeError：ApplicationServiceMock.application$.pipe 不是函数

问题描述

我正在尝试对构造函数中有这个的 Angular 7 组件进行单元测试

constructor(private store: ApplicationService) {
        this.store.application$.pipe(first()).subscribe(r => { this.application = r; });
    }

现在，当我尝试测试时，我得到了错误

TypeError: ApplicationServiceMock.application$.pipe is not a function

这就是我尝试测试的方式

const ApplicationServiceMock= mock(ApplicationService);

......

when(ApplicationServiceMock.application$.pipe()).thenResolve(Observable.of(Applications.ApplicationServiceDummy));

......

providers: [
                    { provide: ApplicationService, useFactory: () => ApplicationServiceMock}
                ],

我也尝试使用 jasmine.spy，但即使这样也不起作用并抛出完全相同的错误。我在这里做错了什么或错过了什么？

标签： angularunit-testingangular-test

解决方案

我不知道有什么mock作用。但我会假设它只会为您的 ApplicationService 创建一个空包装器。你需要告诉你的间谍或模拟，那确实有一个名为的属性application$，它返回任何可观察的。

所以你需要这样的东西：

const applicationServiceMock = {
  application$: () => EMPTY
}

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [AppComponent],
            providers: [{provide: ApplicationService, useValue: applicationServiceMock}],
            schemas: [NO_ERRORS_SCHEMA]
        })
            .compileComponents();
    }));

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

    it('should be created', () => {
      fixture.detectChanges();
      expect(component).toBeTruthy();
    });
});

由于您在组件的构造函数中访问 observable，因此您需要EMPTY像我一样或of(YOUR_TEST_VALUE_HERE)在模拟属性中预先定义预期的 Observable，因为在您可以干预块内部之前调用构造函数 it。

如果您喜欢使用spyOn，则需要将订阅代码从组件的构造函数移动到ngOnInit生命周期挂钩。然后，您可以spyOn在测试中调用第一个 fixture.detectChanges() 之前更改存根。

推荐阅读