如何在 Angular 中使用 Jasmine 测试 RxJS switchMap？

Question

在我的 Angular 项目中，我的一个组件中有这段代码：

  delete(post: PostInterface): void {
    const delete$ = this.appDataService.proxy
      .delete(post, this.paginate)
      .pipe(switchMap(() => this.loadDatas()));

    this.subscriptions.add(
      this.appDataService.start(delete$, 'delete').subscribe()
    );
  }

在我的规范文件中：

describe('PostListComponent', () => {
  let component: PostListComponent;
  let fixture: ComponentFixture<PostListComponent>;
  let debugElement: DebugElement;

  beforeEach(async () => {

    await TestBed.configureTestingModule({
      // ...
    })
    .compileComponents()
    .then(() => {
      fixture = TestBed.createComponent(PostListComponent);
      component = fixture.componentInstance;
      debugElement = fixture.debugElement;

      fixture.detectChanges();
    });
  });

  describe('functions', () => {
    it('should be delete with proxy.delete() and reload datas', fakeAsync(() => {
      spyOn(component, 'loadDatas');

      component.delete(1);

      flush();

      expect(component.loadDatas).toHaveBeenCalledTimes(1);
    }));
  });
});

在实际环境中switchMap 工作正常，但在测试中失败并显示以下消息：

PostListComponent > functions > should be delete with proxy.delete() and reload datas

Expected spy loadDatas to have been called once. It was called 0 times.

为什么我的测试中没有运行switchMap？有什么想法吗？

Answer 1

测试没有按预期工作的原因可能在于您没有subscribe Observable。

订阅启动流，即触发执行嵌入在 Observable 链中的任何代码。

所以，你可能想试试这个版本的测试，看看情况是否有所改善

 describe('functions', () => {
    it('should be delete with proxy.delete() and reload datas', (done) => {
      spyOn(component, 'loadDatas');

      component.delete(1).subscribe({
        next: err => done(err),
        complete: () => {
           expect(component.loadDatas).toHaveBeenCalledTimes(1);
           done();
        }
      });

      flush();

    });
  });

如您所见，我没有使用 fakeAsync，我假设 delete 实际上已被执行。