1

I have a small issue with my component. Everything is working fine in my browser without any errors, but the Karma debugger throws some errors and as far as I want to have everything clear I would like to fix it.

error:

Failed: Template parse errors:
'dj-menu' is not a known element:
1. If 'dj-menu' is an Angular component, then verify that it is part of this module.
2. If 'dj-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

The <dj-menu> selector is used in app.component.html.

menu.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'dj-menu',
    template: `<nav>
                        <button mat-button routerLink="/login" routerLinkActive="active">Login</button>
                        <button mat-button routerLink="/register" routerLinkActive="active">Register</button>
                        <button mat-button routerLink="/profile" routerLinkActive="active">Profile</button>
                        <button mat-button routerLink="/radio">Radio</button>
                   </nav>
`,
    styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
    {...} // only an empty constructor and ngOnInit()
}

I have a MenuComponent declared in declarations in @NgModule of app.module.ts.

As I said it's working fine in browser, but not in the Karma debugger. So far I tried few answers about similar error (e.g If '<selector>' is an Angular component, then verify that it is part of this module) but nothing is working.

I appreciate any help, thanks.

shaelex
  • 251
  • 3
  • 17
  • You should be declaring it in the TestBed in the same way it is declared in app.module.ts (I am presuming you are testing with TestBed?). – Richard Matsen Apr 09 '18 at 08:06

1 Answers1

2

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 ]
})
nerding_it
  • 704
  • 7
  • 17