How do you know which components to import when unit testing?

Question

I am using Angular2 (2.1.0) final release.

I was importing all components via AppModule when unit testing using ...

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule],
      ...

However, this made test runs slow.

I am now listing only the components I need as follows ...

  beforeEach(async(() => {
    // noinspection JSUnusedGlobalSymbols
    TestBed.configureTestingModule({
      imports: [BrowserModule, FormsModule, HttpModule], // modules
      declarations: [
        // pipes
        AttributeCheckPipe,
        // directives
        // DatePickerDirective,
        ...

However, I have lots and lots of components and I am not sure which ones to import. The test output does not tell me which ones I need to import. It just simply passes (when I import them all) or fails (if I don't) but it doesn't tell me which ones are needed.

The error is an annoying / useless ..

invokeTask@node_modules/zone.js/dist/zone.min.js:1:36996
onInvokeTask@node_modules/zone.js/dist/proxy.min.js:1:2190
invokeTask@node_modules/zone.js/dist/zone.min.js:1:36939
runTask@node_modules/zone.js/dist/zone.min.js:1:31466
a@node_modules/zone.js/dist/zone.min.js:1:17818
g@node_modules/core-js/client/shim.min.js:8:19058
node_modules/core-js/client/shim.min.js:8:19180
k@node_modules/core-js/client/shim.min.js:8:14294
l@node_modules/zone.js/dist/zone.min.js:1:18418
l@node_modules/zone.js/dist/zone.min.js:1:18175
node_modules/zone.js/dist/zone.min.js:1:18715

How do I get feedback about which components I failed to import? thx

I am using Karma and PhantomJS.

My Karma config excerpt is ..

client: {
  captureConsole: true
},
logLevel: config.LOG_DEBUG

Answer 1

Finally made some progress here. I added a catch block to compileComponents() and logged e.message and got some useful output which gives me something to work on!

Heres my code ..

  beforeEach(async(() => {
    TestBed.configureTestingModule({

      imports: [FormsModule, HttpModule, routing], // modules

      declarations: [
        SaveSearchModalComponent
      ],
      providers: [
        ESQueryService,
        RESTQueryService,
      ]
    }).compileComponents()
      .then(() => {
        fix = TestBed.createComponent(SaveSearchModalComponent);
        instance = fix.componentInstance;
        injector = fix.debugElement.injector;
      }).catch((e) => {
      console.log(e.message);
      throw e;
    });
  }));

An excerpt from the error message output is ...

'dynamic-form' is not a known element: 1. If 'dynamic-form' is an Angular component, then verify that it is part of this module. 2. If 'dynamic-form' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Amazing this is not covered anywhere in the docs (but I should have guessed this sooner!)

AND NOW WHAT ...

WOW, after doing the above (which fixed 99% of issues) I hit another useless error message ...

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

Which comes from ...

/node_modules/@angular/compiler/bundles/compiler.umd.js

So following the advice at ..

Angular 2 Component is not part of any NgModule

I added this log statement to compiler.umd.js

// I ADDED THIS LOG STATEMENT
console.log('compType', String(compType));
// THIS LINE EXISTS ALREADY
throw new Error("Component " + stringify(compType) + " is not part of any NgModule or the module has not been imported into your module.");

this usually identifies the culprit. However, here I got the spurious output ...

LOG: 'function e(e) {__cov_m4LFTxiG42jWqZk7He0hiA.f['4']++;__cov_m4LFTxiG42jWqZk7He0hiA.s['11']++;this.router=e,this.formErrors={invalidCreds:!1};}'

which mentions this.router

So I removed the routing import and voila!

But unbelievable that this pain is necessary.