Test error: Component is not part of any NgModule or the module has not been imported into your module

Question

I have two modules:

• Module A
  • Component Home
  • Component Presentation
• Module B
  • Component CustomInput

app.module.ts (Module A)

@NgModule({
    declarations: [
        HomeComponent,
        PresentationComponent
    ],
    imports: [
        ModuleB
    ]
})
export class AppModule {
}

presentation.component.html

<custom-input><custom-input>

presentation.component.spec.ts

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [PresentationComponent],
            imports: [ModuleB]
        })
        .compileComponents();
    }));

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

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

b.module.ts (Module B)

@NgModule({
    declarations: [
        CustomInputComponent
    ],
    exports: [
        CustomInputComponent
    ]
})
export class ModubleB {
}

The component Presentation uses the CustomInput tag in its html, so in module B, I exported CustomInputComponent then import the module B into module A.

The problem is, in the spec file of Presentation Component, I also have to import Module B into the Test Module. But I have this error:

Component HomeComponent is not part of any NgModule or the module has not been imported into your module

I really don't understand why ? Any ideas ? Thanks !

Answer 1

You need to export the CustomInputComponent in your BModule so you can use it in other modules and in their components, alas in the template of your PresentationComponent. In the spec file of your PresentationComponent you also need to import the BModule, because you use it in the component, and you need to test the component in isolation, so you have to provide everything your component needs.

A very abstract picture of how the components are structured:

AppModule

@NgModule({
  declarations: [AppComponent, HomeComponent, PresentationComponent],
  imports: [BrowserModule, BModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent

@Component({
  selector: 'app-root',
  template: `
    <app-home></app-home>
    <app-presentation></app-presentation>
  `,
  styles: [':host { display: block; border: 1px solid pink; color: pink; padding: 10px; }']
})
export class AppComponent { }

AppComponent spec

...
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [BModule],
    declarations: [AppComponent, HomeComponent, PresentationComponent]
  }).compileComponents();
}));
...

HomeComponent

@Component({
  selector: 'app-home',
  template: `<p>home works!</p>`,
  styles: [':host { display: block; border: 1px solid orange; color: orange; padding: 10px; }']
})
export class HomeComponent { }

HomeComponent spec

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

PresentationComponent

@Component({
  selector: 'app-presentation',
  template: `
    <p>presentation works!</p>
    <app-custom-input></app-custom-input>
  `,
  styles: [':host { display: block; border: 1px solid blue; color: blue; padding: 10px; }']
})
export class PresentationComponent { }

PresentationComponent spec

...
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [BModule], // has to import the module because you use its exported component in the PresentationComponent
    declarations: [PresentationComponent]
  }).compileComponents();
}));
...

BModule

@NgModule({
  imports: [CommonModule],
  declarations: [CustomInputComponent],
  exports: [CustomInputComponent] // has to export the component to make it available to other modules
})
export class BModule { }

CustomInputComponent

@Component({
  selector: 'app-custom-input',
  template: `<p>custom-input works!</p>`,
  styles: [':host { display: block; border: 1px solid green; color: green; padding: 10px; }']
})
export class CustomInputComponent { }

CustomInputComponent spec

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

Answer 2

Try NO_ERRORS_SCHEMA. That should solve your issue.