Question

简单地运行应用程序我没有得到任何错误，它运行正常，但是当我运行我的测试时，我收到以下错误：

'pattern-list' is not a known element:
  1. If 'pattern-list' is an Angular component, then verify that it is part of this module.
  2. If 'pattern-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
         [ERROR ->]<pattern-list></pattern-list>

当我刚用“＆nbsp; npm-start＆＃39;”运行应用程序时，我首先遇到了这个问题。我解决了它在声明部分中向app.module添加所需组件的问题。但现在，因为我想测试我得到同样的错误，我不知道为什么。这是我的代码：

app.module.ts

@NgModule({
  imports: [ BrowserModule, FormsModule, HttpModule, ReactiveFormsModule ],
  declarations: [ AppComponent, PatternListComponent, PatternDetailComponent, WidgetListComponent,
    FormComponent, DefaultWidget, LabelComponent, CheckboxWidget ],
  bootstrap: [ AppComponent ],
  providers: [ WidgetService ]
})
export class AppModule { }

app.component.ts

@Component({
     selector: 'my-app',
     template: `
           <pattern-list></pattern-list>
          `
    })
    export class AppComponent { }

pattern.list.component：

@Component({
  selector: 'pattern-list',
  template: `
    <div class="patterns">
      <pattern-detail *ngFor="let p of patternDetails" [metadata]="p" 
        (selectPattern)="selectPattern(p)"></pattern-detail>
    </div>
    <div *ngIf="selectedPattern" class="widget-list">
      <widget-list [pattern]="selectedPattern">
      </widget-list>
    </div>
  `,
  styleUrls: ['/css/styles.css']
})
export class PatternListComponent implements OnInit{
  selectedPattern: PatternDetails;
  constructor(private http: Http) {
  }

  patternDetails: PatternDetails[];

  ngOnInit() {
    this.getPatterns();
  }

  getPatterns() {
    this.http.get('/app/assets/patternDetails.json')
      .map((res:Response) => res.json() )
      .subscribe(
        data => { this.patternDetails = data.patternList; },
        err => console.error('The problem is: ' + err),
        () => console.log('done')
      );
    console.log(this.patternDetails);
  }

  selectPattern(pattern: PatternDetails) {
    this.selectedPattern = pattern;
    this.setSelectedProperty(pattern);
  }

  setSelectedProperty(selectedPattern: PatternDetails) {
    for (var p in this.patternDetails) {
      if (this.patternDetails[p] == selectedPattern) {
        this.patternDetails[p].selected = true;
      } else {
        this.patternDetails[p].selected = false;
      }
    }
  }
}

我的测试文件：app.component.spec.ts

describe('AppComponent with TCB', function () {
  beforeEach(() => {
    TestBed.configureTestingModule({declarations: [AppComponent]});
  });
  describe('asdfasdf', function () {
    beforeEach(async(() => {
      TestBed.compileComponents();
    }));
    it('should instantiate component', () => {
      let fixture = TestBed.createComponent(AppComponent);
      expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
    });
  });
});

我使用网络包，我不确定这是否重要。

Answer 1

我认为你需要

{{1}}

Answer 2

当前测试组件时避免这些错误的方法是使测试变浅。根据{{3}}：

将NO_ERRORS_SCHEMA添加到测试模块的模式元数据中，以告诉编译器忽略无法识别的元素和属性。您不再需要声明不相关的组件和指令。

因此，您只需导入NO_ERRORS_SCHEMA并将其添加到测试模块配置中：

import { NO_ERRORS_SCHEMA } from '@angular/core';

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

但要注意：

使用NO_ERRORS_SCHEMA进行浅组件测试可大大简化复杂模板的单元测试。但是，编译器不再警告您错误，例如拼写错误或误用的组件和指令。

Answer 3

正如micronyks在他的回答中提到的那样，我需要在configureTestingModule的声明中添加我的其他依赖项。因此，如果我在测试中修改我的模块配置，如下所示：

TestBed.configureTestingModule({declarations: [AppComponent,PatternListComponent]});

它会起作用。看来你需要在configureTestingModule声明中添加每个依赖项。

Angular 2 RC6：＆＃39;模式列表＆＃39;不是一个已知的元素

3 个答案: