Angular Karma Jasmine 测试“无法绑定到 'ngIf'，因为它不是已知属性”答案

【问题标题】：Angular Karma Jasmine test "Can't bind to 'ngIf' since it isn't a known property"Angular Karma Jasmine 测试“无法绑定到 'ngIf'，因为它不是已知属性”
【发布时间】：2020-12-28 00:20:18
【问题描述】：

我对 Angular @Component 的 Karma Jasmine 测试抱怨

错误：'无法绑定到'ngIf'，因为它不是'p'的已知属性。'

当有that kind of error for the application itself 时，fix 是为了确保您将BrowserModule 添加到您的应用程序模块（app.module.ts）的@NgModule() 中的imports: [] 中。我确实有那个进口（所以这个问题不是那个canonical question about "Can't bind to 'ngXXX' since it isn't a known property of 'YYY'的重复）。

这是我的测试设置代码：

    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;

    beforeEach(async () => {
        TestBed.configureTestingModule({
            imports: [
                BrowserModule
            ],
            providers: [
                MyComponent,
                { provide: MyService, useClass: MockMyService }
            ]
        }).compileComponents();
        TestBed.inject(MyService);
        component = TestBed.inject(MyComponent);
        fixture = TestBed.createComponent(MyComponent);
        fixture.detectChanges();
    });

我的 HTML 模板显示的是 *ngIf，而不是 ngIf 或者是拼写错误，而是另一个 common cause of that error message：

<div class="self">
    <p *ngIf="isLoggedIn() else selfLogin">Logged in as
        {{getUsername()}}</p>
    <ng-template #selfLogin>
    <button id="login" (click)="login()">login</button>
    </ng-template>
</div>

将测试模块配置和对象注入放在单独的 beforeEach 调用中（如 different Angular testing problem 的建议）没有帮助。

【问题讨论】：

我认为您需要导入 CommonModule 而不是 BrowserModule，但在测试中不需要导入。您确定您的 HTML 中有 *ngIf="..." 而不是 ngIf=".." 吗？另外，尝试在configureTestingModule 之后添加compileComponents。

标签： angular jasmine karma-jasmine

【解决方案1】：

我看到您将组件包含在您的 TestBed providers 中。组件通常是declarations 的一部分。所以，是这样的：

    let fixture: ComponentFixture<MyComponent>;
    let component: MyComponent;

    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            providers: [
                { provide: MyService, useClass: MockMyService }
            ],
            declarations: [
                MyComponent
            ]
        }).compileComponents();
    }));
    beforeEach(() => {
        TestBed.inject(MyService);
        fixture = TestBed.createComponent(SelfComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

您的else 声明也存在 HTML 格式问题：

<div class="self">
    <p *ngIf="isLoggedIn() else selfLogin">Logged in as
        {{getUsername()}}</p>
    <ng-template #selfLogin>
    <button id="login" (click)="login()">login</button>
    </ng-template>
</div>

应该是……

*ngIf="isLoggedIn(); else selfLogin"

【讨论】：

谢谢它有效 :) 我只需要添加 declarations 和 compileComponents() 来解决我的问题

【解决方案2】：

由于我没有在声明中包含被测组件，我得到了同样的错误。

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

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [
          MyComponent, // <-What i forgot.
          OtherComponent,
        ],
...

【讨论】：