角因果报应茉莉花测试“不能绑定到‘ngIf’，因为它不是已知属性”

Question

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

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

当应用程序本身出现此类错误时，修复方法是确保将浏览器模块添加到应用程序模块（app.module.ts）的导入：[]。我确实有这个意思（所以这个问题不是关于“不能绑定到'ngXXX'的规范问题的重复，因为它不是'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();
    });

我的超文本标记语言模板显示*ngIF，而不是ngIF或错别字，这是该错误消息的另一个常见原因：

<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>

在每次调用之前，将测试模块配置和对象注入单独的（如针对不同角度测试问题所建议的那样）没有帮助。




Answer 1

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

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

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

Answer 2

我看到您将组件包括在测试平台中提供者。组件通常是声明的一部分。比如说：

    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”