Angular 测试失败：“预期是间谍，但得到了功能。”

Question

我有这个测试，完美运行：

it('The click on the logo must call goTo("home")', () => {
  spyOn<LayoutComponent, any>(component, 'goTo');
  let logo = fixture.debugElement.query(
    By.css('#logoVitisoft')
  ).nativeElement;
  logo.click();
  fixture.whenStable().then(() => {
    expect(component.goTo).toHaveBeenCalledWith('home');
  });
});

而这个（与前一个几乎相同）触发了错误：

it('The click on Dashboard must call goTo(home)', () => {
  spyOn<LayoutComponent, any>(component, 'goTo');
  let button = fixture.debugElement.query(
    By.css('#dashboardElem')
  ).nativeElement;
  button.click();
  fixture.whenStable().then(() => {
    expect(component.goTo).toHaveBeenCalledWith('home'); /* ERROR SPAWN HERE */
  });
});

精度：如果两个测试都以“fit”调用，则它们都通过了，我禁用了测试的随机性，并继续使用相同的种子执行 ng test。当我将第二个测试称为“它”时出现错误：“预期是间谍，但得到了功能。”

编辑：这里是 beforeEach

beforeEach(async () => {
 await TestBed.configureTestingModule({
  imports: [RouterTestingModule, HttpClientModule],
  declarations: [LayoutComponent],
 }).compileComponents();
});
beforeEach(() => {
 fixture = TestBed.createComponent(LayoutComponent);
 component = fixture.componentInstance;
 fixture.detectChanges();
});

我错过了什么？

Answer 1

fixture.whenStable() 返回一个 Promise，它是异步执行的。这意味着在执行expect() 时，您的测试已经完成并清理完毕。

尝试使用done() 函数进行这些类型的测试：

it('The click on Dashboard must call goTo(home)', (done) => {
  spyOn<LayoutComponent, any>(component, 'goTo');
  let button = fixture.debugElement.query(
    By.css('#dashboardElem')
  ).nativeElement;
  button.click();
  fixture.whenStable().then(() => {
    expect(component.goTo).toHaveBeenCalledWith('home');
    done();
  });
});