测试错误：组件不是任何NgModule的一部分，或者模块尚未导入到您的模块中

Question

我有两个模块：

• 模块A
  • 组件主页
  • 组件演示
• 模块B
  • 组件CustomInput

app.module.ts （模块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 （模块B）

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

Presentation组件在其html中使用CustomInput标记，因此在模块B中，我导出了CustomInputComponent，然后将模块B导入到模块A中。

问题是，在Presentation Component的规范文件中，我还必须将模块B导入测试模块。但是我有这个错误：

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

我真的不明白为什么？有任何想法吗 ？谢谢！

Answer 1

您需要将CustomInputComponent导出到BModule中，以便可以在其他模块及其组件中使用它，例如在PresentationComponent的模板中。在PresentationComponent的规范文件中，您还需要导入BModule，因为您在组件中使用了它，并且需要单独测试组件，因此您必须提供组件所需的一切

有关组件结构的非常抽象的图片：

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规范

...
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规格

...
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 { }

Presentationation组件规范

...
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规范

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

Answer 2

尝试使用NO_ERRORS_SCHEMA。那应该可以解决您的问题。