"CUSTOM_ELEMENTS_SCHEMA" Errors in Testing Angular 2 App "CUSTOM_ELEMENTS_SCHEMA" Errors in Testing Angular 2 App typescript typescript

"CUSTOM_ELEMENTS_SCHEMA" Errors in Testing Angular 2 App


So what I had to do to get this working was also set the schemas in the TestBed.configureTestingModule - which is not a separate module file, but a part of the app.component.spec.ts file. Thanks to @camaron for the tip. I do think the docs could be a clearer on this point.

Anyway, this is what I added to get it to work. Here are the opening contents of my app.component.spec.ts file.

import { TestBed, async } from '@angular/core/testing';import { AppComponent } from './../app.component';import { RouterTestingModule } from '@angular/router/testing';import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';describe('AppComponent', () => {  beforeEach(() => {    TestBed.configureTestingModule({      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],      declarations: [AppComponent],      imports: [RouterTestingModule]    });    TestBed.compileComponents();  });


It works for me this way, in your spec.ts file you have to import your components and needs to add it to declarations. In my case its in about.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';import { AboutComponent } from './about.component';import { SidebarComponent } from './../sidebar/sidebar.component';import { FooterComponent } from './../footer/footer.component';describe('AboutComponent', () => {  let component: AboutComponent;  let fixture: ComponentFixture<AboutComponent>;  beforeEach(async(() => {    TestBed.configureTestingModule({       declarations: [ AboutComponent, SidebarComponent, FooterComponent ]    })    .compileComponents();  }));  beforeEach(() => {    fixture = TestBed.createComponent(AboutComponent);    component = fixture.componentInstance;    fixture.detectChanges();  });  it('should create', () => {    expect(component).toBeTruthy();  });});