How to ignore an html tag of a 3rd party component in an angular4 unit test?

Question

I have looked in the docs, checked SO, and tried different solutions/work arounds and I just can't seem to get this to work. I am writing a unit test for an angular4 app with karma/jasmine. It tests a component which makes use of a third party component ckeditor (https://www.npmjs.com/package/ng2-ckeditor). Although when I run the test I get this error...

Failed: Uncaught (in promise): Error: Template parse errors: 'ckeditor' is not a known element: 1. If 'ckeditor' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]

"): ng:///DynamicTestModule/CkEditorComponent.html@0:0 Error: Template parse errors: 'ckeditor' is not a known element: 1. If 'ckeditor' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->] "): ng:///DynamicTestModule/CkEditorComponent.html@0:0 ...

My unit test file looks like this

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ManageInvanareLoginComponent } from './manage-invanare-login.component';
import {CreateDriftInfoComponent} from "../create-drift-info/create-drift-info.component";
import {CreateLoginTextComponent} from "../create-login-text/create-login-text.component";
import {MdInputContainer, MdInputModule} from "@angular/material";
import {CKEditorModule} from "ng2-ckeditor";
import {CkEditorComponent} from "../ck-editor/ck-editor.component";

describe('ManageInvanareLoginComponent', () => {
  let component: ManageInvanareLoginComponent;
  let fixture: ComponentFixture<ManageInvanareLoginComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        CkEditorComponent,
        CreateDriftInfoComponent,
        CreateLoginTextComponent,
        ManageInvanareLoginComponent,
        MdInputContainer
      ],
      providers:[
        CKEditorModule,
        MdInputModule
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ManageInvanareLoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

My app.module.ts file looks like this...

    ...
           import { NO_ERRORS_SCHEMA } from "@angular/core"; 
        import { CKEditorModule } from 'ng2-ckeditor';


            @NgModule({   declarations: [
                AppComponent,
                WelcomeComponent,
                DriftInfoDisplayComponent,
                LoginInfoComponent,
                SideBarComponent,
                CkEditorComponent,
                ManageInvanareLoginComponent,
                CreateDriftInfoComponent,
                CreateLoginTextComponent   ],   exports:[
                CkEditorComponent   ],   imports: [
                CKEditorModule,
                BrowserModule,
                FormsModule,
                HttpModule,
                AppRoutingModule,
                BrowserAnimationsModule,
                MdGridListModule,
                MdButtonModule,
                MdInputModule   ],   providers: [
                PathsService,
                DriftInfoDisplayComponent,
                DriftInfoService   
                ],   
            schemas:[NO_ERRORS_SCHEMA],   
            bootstrap: [AppComponent] }) 
            export class AppModule { }

I dont event want to test the ckeditor element but I do want to test other functions in the component which contains this creditor element tag.

Is there a way that I can tell the test to just ignore this tag?

Answer 1

You should also add schemas:[NO_ERRORS_SCHEMA] to your test configuration

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

See also

• https://blog.nrwl.io/essential-angular-testing-192315f8be9b