"CUSTOM_ELEMENTS_SCHEMA" Errors when testing Angular 2 applications

Question

When writing tests for my Angular 2 application, I come across these re: selectors errors that we use:

"): AppComponent @ 12: 35 'tab-view' is not a known element: 1. If" my-tab "is an Angular component, then make sure that it is part of this module. 2. If" my-tab "is web component, add "CUSTOM_ELEMENTS_SCHEMA" to the "@ NgModule.schemas" of this component to suppress this message. ("[ERROR →]      

I have added CUSTOM_ELEMENTS_SCHEMA to my root module as well as all other modules, but I still get errors. What else do I need to do? Should it be in all modules or just in the root? Is there anything else I need to add?

Answer 1

So I needed to do this work, the circuits were also installed in TestBed.configureTestingModule - which is not a separate module file, but part of the app.component.spec.ts file. Thanks to @camaron for the tip. I really think the docs may be clearer on this.

, , , . app.component.spec.ts.

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

Answer 2

, spec.ts import declarations. 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();
  });
});