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/z…

Accepted Answer

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.

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

Solution

Problem

Related problems