时间戳

首页 > 解决方案 > Angular Jasmine 测试超时

angular - Angular Jasmine 测试超时

问题描述

我正在研究一个 Ionic Angular 项目，并且由于超时而不断为各种不同的测试进行间歇性失败的单元测试。奇怪的是，这些只是创建规范文件时默认的“应该创建”测试。

Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)

我已经阅读了一些相关的文章/堆栈溢出帖子，但似乎没有一个可以解决这个问题。很难隔离问题，因为有时它运行良好，而另一些则超时。这发生在几个不同的测试中，但我将提供一个最基本的失败测试的示例。

零件

export class MenuItemCardComponent implements OnInit {

  @Input() menuItem: MenuItem

  constructor(private firebaseService: FirebaseService) { }

  ngOnInit() {
    this.loadImage()
  }

  loadImage() {
    this.firebaseService.loadImage(this.menuItem.id, "menuItems").then(url => {
      this.menuItem.imageUrl = url
    })
  }

}

服务功能（this.storage var is firebase.storage.Storage）

async loadImage(id: string, ref: string) {
    return this.storage.ref(ref).child(`${id}`).getDownloadURL().catch(() => { /* console.log(`Error getting menuItem id: ${error.code}`) */ })
}

规格文件

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MenuItemCardComponent ],
      imports: [IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(MenuItemCardComponent);
    component = fixture.componentInstance;
    component.menuItem = {
      title: "Menu Item",
      price: "3.50"
    }
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

标签： angulartypescriptionic-frameworkkarma-jasmine

解决方案

jfd348 是绝对正确的。似乎它确实超时的时间，loadImage方法调用花费的时间超过 5 秒。要修复它，您必须提供一个存根。

尝试这个：

describe('MenuItemCardComponent', () => {
  let component: MenuItemCardComponent;
  let fixture: ComponentFixture<MenuItemCardComponent>;
  // add this line
  let mockFirebaseService: jasmine.SpyObj<FirebaseService>;

  beforeEach(async(() => {
    // and this one
    // The first string is optional but I provide it for debugging purposes
    // and the second array strings are the public methods you would like to mock
    mockFirebaseService = jasmine.createSpyObj<FirebaseService>('FirebaseService', ['loadImage']);
    TestBed.configureTestingModule({
      declarations: [ MenuItemCardComponent ],
      imports: [IonicModule.forRoot()],
      providers: [
        // provide the mock for the real FirebaseService
        { provide: FirebaseService, useValue: mockFirebaseService }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(MenuItemCardComponent);
    component = fixture.componentInstance;
    component.menuItem = {
      title: "Menu Item",
      price: "3.50"
    }
    // the first fixture.detectChanges calls ngOnInit so we have to provide
    // the results of loadImage before it
    mockFirebaseService.loadImage.and.returnValue(Promise.resolve('xyz'));
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

通过这些更改，测试不应该有async超时。

推荐阅读