测试运行时 Angular 2 模板解析错误

Question

所以我有一个简单的组件:

画廊.comonent.ts

import {Component, Input} from '@angular/core';


@Component({
  selector: 'galery-component',
  templateUrl: 'galery.component.html',
  styleUrls: ['galery.component.css']
})
export class GaleryComponent {
  @Input() userPosts;
}

在它的 html 文件中有一个自定义标签。这个标签是我模块的另一个组件的选择器。

画廊.comonent.html

 <div class="container">
        <post-details class="post-container" *ngFor="let post of userPosts" [singlePost] = "post">
        </post-details>
    </div>

当我尝试运行我的测试用例时它启动失败并出现此错误

1. If 'post-details' is an Angular component and it has 'singlePost' input, then verify that it is part of this module.
2. If 'post-details' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

这是一个测试代码:

测试.spec.ts

describe('BannerComponent (inline template)', () => {

  let comp:    GaleryComponent;
  let fixture: ComponentFixture<GaleryComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ GaleryComponent ],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(GaleryComponent); // here test fails

    comp = fixture.componentInstance;
    de = fixture.debugElement.query(By.css('post-details'));
    el = de.nativeElement;
  });

我已将 CUSTOM_ELEMENTS_SCHEMA 添加到我的模块，但没有任何效果。 这是 app.module.ts

应用程序模块.ts

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {AppComponent} from './app.component';
import {GaleryComponent} from './Components/galeryComponent/galery.component';
import {PostDetailsComponent} from './Components/postDetailsComponent/post-details-component.component';

@NgModule({
  declarations: [
    AppComponent,
    GaleryComponent,
    PostDetailsComponent
  ],
  exports: [GaleryComponent],
  imports: [
    CommonModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

export class AppModule {
}

也许有人知道发生了什么事？我已经阅读了一些类似问题的答案，但它们不是很有帮助。

Answer 1

我怀疑你在错误的地方定义了模式

尝试

TestBed.configureTestingModule({
  declarations: [GaleryComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // will work if selector has '-' in its name
})

或

TestBed.configureTestingModule({
  declarations: [GaleryComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

另见

• Essential Angular: Testing