How to shallow test a component with an `entryComponents`?

Question

For example, say you have the following component:

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

Even when using NO_ERRORS_SCHEMA I still have 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 on adding EntryComponents to the testing module interface. See issue: https://github.com/angular/angular/issues/10760

For a current workaround see the Angular Material library see https://github.com/angular/components/blob/master/src/material/dialog/dialog.spec.ts#L1660.

Basically, they create a real module on the fly and then import it for the 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]
      ...