Angular 2 Karma Test 'Component-Name' Is Not a Known Element

Angular 2 Karma Test 'component-name' is not a known element

Because in unit tests you want to test the component mostly isolated from other parts of your application, Angular won't add your module's dependencies like components, services, etc. by default. So you need to do that manually in your tests. Basically, you have two options here:

A) Declare the original NavComponent in the test

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          NavComponent
        ]
      }).compileComponents();
    }));

B) Mock the NavComponent

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          MockNavComponent
        ]
      }).compileComponents();
    }));

// it(...) test cases 

});

@Component({
  selector: 'app-nav',
  template: ''
})
class MockNavComponent {
}

You'll find more information in the official documentation.

Angular 5 karma test showing 'app-addbook' is not a known element

Start by adding the AddbookComponent in the declarations section of the book.component spec file. See below.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {AddbookComponent} from './addbook.component'; 

import { BookComponent } from './book.component';

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
        declarations: [ BookComponent, AddbookComponent ]
        })
        .compileComponents();
    }));

    ...
});

There is a good chance you will have to add other things to the spec as you troubleshoot this. You have changed things in the application, so the specs need to be updated as a result.

Here is a good resource for Angular testing techniques.

Angular5/Karma 'selector' is not a known element

You need to stub child component when you are testing parent component, For example I have two components one is app and another is dj-menu then I should mock dj-menu in app test using code something like below

@Component({
selector: 'dj-menu',
  template: '<h1> Some test </h1>'
})

class DjMenuComponentStub{
}

And my app component look like this (Which uses dj-menu)

@Component({
selector: 'app',
  template: '<dj-menu></dj-menu>'
})

class AppComponent{
}

While testing app component, angular doesn't know about dj-menu you have to tell angular to use stub component by declaring

TestBed.configureTestingModule({
      declarations: [ DjMenuComponentStub ]
})

Angular 2 + ng test: 'X' is not a known component

I was facing the same issue and it turn out that for tests you need to declare used components as well:

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        MyNewComponent       
      ],
    });

Angular Karma - nb-card-header' is not a known element

I have fixed the issue with adding 'NbCardModule'.

Element not known error in Karma when ran ng test

Angular developers often get confused by this. When you run ng test, karma and jasmine runs angular modules defined within .spec.ts files. It does not look at your normal code at all. So whatever you put in app.module.ts has no effect whatsoever on your test module. There are two things you could do.

1. Add CUSTOM_ELEMENTS_SCHEMA to testing module

   Within app.component.spec.ts do the following

   TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
   }).compileComponents();

This would solve the error you are getting now. However, you'll probably encounter others as I've seen you inject some services to AppComponent which brings us to next thing you could do

2. Import AppModule within test module.

   You could just import AppModule within TestBed as follows. What this will do is to ensure that your tests always have what they need defined. If you add another component to AppModule and use it in AppComponent, it will be already available in test as well. Also, you won't need to add CUSTOM_ELEMENTS_SCHEMA.

   However, you should be aware that this will import and create whatever 3rd party component/services you use within app.component. One would argue that it is against the nature of unit testing. You can still mock those services somehow but they will be rendered. Also, in angular applications, when testing a module that imports RouterModule, RouterTestingModule is used instead. Using RouterModule within test may mess your tests up as these tests run on a headless browser and RouterModule may cause URL changes.

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

Angular selector is not a known element: if it's an Angular component, then verify that it is part of this module

Maybe the module that you import doesn't have an export for component that you are looking for?

When you e.g have a component let's say ComponentA in ModuleA, to use ComponentA in other ModuleB, you need to have in Modul A

declarations: [ComponentA]
exports: [ComponentA]

---

Related Topics