Angular testing 出現 Can't bind to 'ngIf' since it isn't a known property of 'section' 問題。

由於在HTML有使用到 *ngIf 與 *ngFor 所以在做 UI 測試的時候 Jasmine 報了 Can't bind to 'ngIf' since it isn't a known property of 'section' 的錯誤。

這個是因為我們沒有在測試環境 import CommonModule 造成測試時認不得 angular 提供的這個 directive。所以在測試環境設定那邊把 CommonModule 加進來就能夠正確辨識這些 directive了。

describe('LobbyComponent', () => { let component: LobbyComponent; let fixture: ComponentFixture<LobbyComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ LobbyComponent ], imports: [ CommonModule // <--- font=""> ], providers: [ DynamicComponentService, ChangeMainContService] }) .compileComponents(); })); ........... 略 ........

然後也別忘了在最上方要 import CommonModule 了！

import { CommonModule } from '@angular/common';

如果是用 vscode 的話會裝 Auto Import 就會自動幫你 import 進來。
最後結果：