TypeError：ApplicationServiceMock.application$.pipe 不是函数答案

【问题标题】：TypeError: ApplicationServiceMock.application$.pipe is not a functionTypeError：ApplicationServiceMock.application$.pipe 不是函数
【发布时间】：2023-03-17 08:28:02
【问题描述】：

我正在尝试对构造函数中包含此的 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，但即使这样也不起作用并抛出完全相同的错误。我在这里做错了什么或遗漏了什么？

【问题讨论】：

标签： angular unit-testing angular-test

【解决方案1】：

我不知道mock 做了什么。但我认为它只会为您的 ApplicationService 创建一个空包装器。你需要告诉你的 spy 或 mock，它确实有一个名为 application$ 的属性，它返回任何 observable。

所以你需要这样的东西：

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 生命周期挂钩。然后，您可以在调用测试中的第一个 fixture.detectChanges() 之前更改存根和 spyOn。

【讨论】：