How to superficially test a component using "entryComponents"?

Question

For example, let's say you have the following component:

import { Another } from "./Another"; @Component({ entryComponents: [ Another ] }) export class App {} 

Even when using NO_ERRORS_SCHEMA I still need to include Another as part of the test declarations:

 import { ComponentFixture, TestBed } from "@angular/core/testing"; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { App } from "./App"; import { Another } from "./Another"; describe("App", () => { let comp: App; let fixture: ComponentFixture<App>; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ App, Another ], schemas: [ NO_ERRORS_SCHEMA ] }); fixture = TestBed.createComponent(App); comp = fixture.componentInstance; }); it("can load instance", () => { expect(comp).toBeTruthy(); }); }); 

Answer 1

They plan to add EntryComponents to the testing module interface. See Question: https://github.com/angular/angular/issues/10760

In the current workaround, see Angular's material library see https://github.com/angular/material2/blob/master/src/lib/dialog/dialog.spec.ts#L479 .

Basically, they create a real module on the fly, and then import it for tests.

 // Create a real (non-test) NgModule as a workaround for // https://github.com/angular/angular/issues/10760 const TEST_DIRECTIVES = [ ComponentWithChildViewContainer, PizzaMsg, DirectiveWithViewContainer, ContentElementDialog ]; @NgModule({ imports: [MdDialogModule], exports: TEST_DIRECTIVES, declarations: TEST_DIRECTIVES, entryComponents: [ComponentWithChildViewContainer, PizzaMsg, ContentElementDialog], }) class DialogTestModule { } 

Now you can use DialogTestModule

  beforeEach(async(() => { TestBed.configureTestingModule({ imports: [MdDialogModule.forRoot(), DialogTestModule] ... 

Answer 2

My decisions are based on @kampsj's solution, but I think it is cleaner.

TestBed create a dynamic module. So we can use the module with entryComponents (nothing new). My difference is that I do not create testModule , I just import the module in which this component belongs , and is cleaner because you do not need to add everything else (service, other components, etc. ... ). This means that if ng serve works, then ng test should (at least from the point of view of the creation component).

Suppose we have the following structure:

 app ├--- app.module.ts ├--- app.component.ts ├--- ... ├--- SomeModule2 | ├--- somemodule2.module.ts | ├--- componentThatCreateDynamicsComponents | ├--- componentThatCreateDynamicsComponents.component.ts | ├--- componentThatCreateDynamicsComponents.html | ├--- componentThatCreateDynamicsComponents.component.spec.ts | ├--- someCOmponent | ├--- someCOmponent.component.ts | ├--- someCOmponent.html | ├--- someCOmponent.component.spec.ts 

TestBed componentThatCreateDynamicsComponents.component.spec.ts should import somemodule2 from somemodule2.module.ts. If you do not divide the project into modules, there must be a unique module that you have.

It is true that you will have a component that you do not use in this test, but that does not matter, because it is just a test. And you get the flexibility to change the test module.