Jasmine Unit Case 具有订阅的组件方法返回未定义并且总是失败

Question

我的组件具有以下方法：

get(): void {
  this.service.get().subscribe((res) => {
    this.response = res;
  });
}

我有以下测试用例：

it('should get content ', () => {
  const currentObject = {};

  spyOn(service, 'get').and.returnValue(of(currentObject));

  component.get();

  fixture.detectChanges();
  expect(component.response).toEqual(currentObject);

});

结果始终是：

预期未定义等于 Object({ })。

这里有很多与此相关的类似问题，但由于某种原因，这些问题都不适合我。

Answer 1

我认为这可能是由于代码的异步性质所致，其中 .subscribe 在您的 expect 之后发生。

尝试这样进行调试：

get(): void {
  this.service.get().subscribe((res) => {
    // !! add this log and ensure you see it first
    console.log('[get] This should happen first');
    this.response = res;
  });
}

// Test
it('should get content ', () => {
  const currentObject = {};

  spyOn(service, 'get').and.returnValue(of(currentObject));

  component.get();

  fixture.detectChanges();
  // !! add this log and ensure you see it last
  console.log('[test] This should happen last');
  expect(component.response).toEqual(currentObject);

});

确保您在这应该发生在最后之前看到这应该首先发生。

我认为解决这个问题的一个潜在方法可能是使用fakeAsync/tick。

// wrap callback function in fakeAsync
it('should get content ', fakeAsync(() => {
  const currentObject = {};

  spyOn(service, 'get').and.returnValue(of(currentObject));

  component.get();

  fixture.detectChanges();
  // call tick() here to ensure the asynchronous subscribe runs before the expect
  tick();
  expect(component.response).toEqual(currentObject);

}));