Jasmine 測試超時，“異步回調未在 5000 毫秒內調用”盡管沒有異步 function 用於我的 Angular 項目測試

Question

這是源代碼：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { LevelGridComponent } from '../level/level-grid/level-grid.component';
import { SidebarComponent } from '../sidebar/sidebar.component';
import { LevelStatusSidebarComponent } from '../level/level-status-sidebar/level-status-sidebar.component';

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

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

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

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

現在測試打開瀏覽器，渲染組件，然后什么都不做，持續 5 秒，（因此）似乎超時：

主頁應該創建 FAILED 錯誤：超時 - 在 node_modules/jasmine-core/lib/jasmine-core/jasmine.js（第 5494 行）中未在 5000 毫秒內調用異步回調（由 jasmine.DEFAULT_TIMEOUT_INTERVAL 設置）

之前發生的事情

以前，我遇到了通常的 Angular“此模塊未定義”錯誤，即：

'app-level-status-sidebar' 不是已知元素：
1. 如果 'app-level-status-sidebar' 是 Angular 組件，則驗證它是該模塊的一部分。
2. 如果 'app-level-status-sidebar' 是 Web 組件，則將 'CUSTOM_ELEMENTS_SCHEMA' 添加到此組件的 '@NgModule.schemas' 以抑制此消息。 ("

為了解決這個問題，我在“聲明”中添加了真正的組件，如您在上面看到的。

我認為這是因為在 HTML 中我使用了其他組件，即我在上面添加的那些。

---

由於測試實際上非常簡單，我預計這里不會出現任何問題，而且它似乎也可以運行（我添加了 console.log 語句並在其中執行了it('should create' 。）因為測試 function 沒有實際上啟動任何異步 function 並且是 100% 同步的，我沒想到這里會失敗。

為了測試，我還添加了一個明確的done function 調用到it測試 function 並在最后調用它，但這並沒有改變任何東西。

---

編輯：我認為我正在解決問題。 所以它看起來：

• 通常™ 我不需要在 TestBet“聲明”中指定被測組件使用的組件。 （所有其他測試都這樣做並且運行沒有問題）
• 導致問題的異步事物/計時器實際上似乎是LevelStatusSidebarComponent中的一個計時器，它從 5 秒倒計時到 0 秒（在可觀察的情況下）。

下面是定時器的源代碼：

public timeLeft = 5;
// […]

private startTimer() {
    const counter$ = interval(1000);

    const takeFourNumbers = counter$.pipe(
      take(this.timeLeft),
      takeUntil(this.ngUnsubscribe)
    );
    takeFourNumbers.subscribe(x => {
      this.timeLeft--;
      if (this.timeLeft === 0) {
        this.levelTimeout.emit();
      }
    });
  }

這仍然沒有解決在測試中定義組件的第一個問題，因為錯誤仍然發生，所以我仍然需要定義它們。 而且我仍然沒有得到技術細節，為什么組件的依賴鏈中隨機未解析的 Observable 會導致組件在測試中以某種方式“超時”。 （即使它只是被檢查為“真實的”，即存在）

Answer 1

如果您要對主頁進行單元測試，則不應將子組件添加到聲明中。 相反，您可以只創建該組件的存根版本。 您可以將類似下面的內容放在規范文件的底部，然后將 StubLeveltatusSidebarComponent 添加到您的聲明中（您可能還需要存根輸入）。

@Component({ selector: 'app-level-status-sidebar', template: '' })

class StubLevelStatusSidebarComponent{}

或者，您可以嘗試將以下內容添加到您的 configureTestingModule object 中，它應該忽略丟失的子錯誤並繼續進行測試。

架構：[NO_ERRORS_SCHEMA]

Answer 2

我遇到過同樣的問題。 從“beforeEach”function 中刪除“async”（或“waitForAsync”）。 您在那里沒有使用任何“等待”：

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [
      HomePage,
      LevelGridComponent,
      SidebarComponent,
      LevelStatusSidebarComponent
    ],
    imports: [IonicModule.forRoot()]
  }).compileComponents();

  fixture = TestBed.createComponent(HomePage);
  component = fixture.componentInstance;
  fixture.detectChanges();
});