CODEWITHSUNDEEP
htmlangulartypescriptkarma-jasmine
arevilla009
arevilla009

Reputation: 453

'xxxxx' is not a known element on Karma+Jasmine testing Angular

I'm new in Angular 10 testing and I'm continuously receiving the next message when I run ng test, so despite I had been looking for the same issue I did not find it. enter image description here

This is my app.component.html and app.component.ts

<app-navbar></app-navbar>
<div class="container pt-4">
  <flash-messages></flash-messages>
  <router-outlet></router-outlet>
</div>

import {FlashMessagesModule} from 'angular2-flash-messages'; // installed by: npm i angular2-flash-messages
import {RouterModule} from '@angular/router';
import { NavbarComponent } from './components/navbar/navbar.component';
...

@NgModule({
  declarations: [
    NavbarComponent,
    ...
  ],
  imports: [
    RouterModule.forRoot(appRoutes), //routes array
    FlashMessagesModule.forRoot(),
    ...
  ],

.spec.ts files: app.component.spec.ts

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

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
...

navbar.component.spec.ts

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ NavbarComponent ]
    })
    .compileComponents();
  });

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

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

Flash-messages and router-outlet are not components created, even so I did not touch any test of any component. Any idea? Thanks!

Upvotes: 0

Views: 5654

Answers (1)

Luis Reinoso
Luis Reinoso

Reputation: 758

Summary

You should do all imports of modules, components, providers to test environment similar to NgModule decorator.

Example

In this case inside your app.component.html you are using, router, flash-messages, navbar

<app-navbar></app-navbar>
<div class="container pt-4">
  <flash-messages></flash-messages>
  <router-outlet></router-outlet>
</div>

So your test file should looks like this.

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        NavbarComponent  // <-- becuase you use app-navbar
      ],
      imports: [
        RouterTestingModule // <-- because you use router-outlet
        FlashMessagesModule.forRoot() // <-- because you use flash-messages
      ]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

Upvotes: 1

Related Questions