Angular 2 RC6: 'pattern-list' is not a known element

Question

Simply running the application I get no error and it works just fine, but when I run my tests I get the following error:

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

I had this issue first when I just run the application with 'npm-start' and I solved it adding the required component to app.module in the declarations section. But now as I want to test I get the same error and I don't know why. Here is my code:

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

My test file: 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');
    });
  });
});

I'm using webpack, I'm not sure if that matters.

Answer 1

The current approach to avoid these errors when testing components is to make their tests shallow. As per the official docs:

Add NO_ERRORS_SCHEMA to the testing module's schemas metadata to tell the compiler to ignore unrecognized elements and attributes. You no longer have to declare irrelevant components and directives.

So you can simply import NO_ERRORS_SCHEMA and add it to your testing module config:

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

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

But be aware of:

Shallow component tests with NO_ERRORS_SCHEMA greatly simplify unit testing of complex templates. However, the compiler no longer alerts you to mistakes such as misspelled or misused components and directives.

Answer 2

As micronyks mentined in his answer I need to add my other dependencies in the declarations of configureTestingModule. So if I modify my module configuration in the test like this:

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

it'll work. It seems you need to add every dependency in the configureTestingModule declaration.

Answer 3

I think you need

TestBed.configureTestingModule({imports: [AppModule]});