Angular (4.0.0-beta.8) testing component fixture undefined after test execution with subcomponents

Question

I really don't know what is happening, but I have a really strange behaviour when testing my Angular code. I am just setting things up and most things work, but not if I have subcomponents defined in the declaration of TestBed.configureTestingModule. The first test in a describe works, and all others following this test, even in another file, does not work anymore since somehow fixture = TestBed.createComponent(component); does not get executed (I assume, since fixture is undefined)

For sure, somewhere I am doing a big mistake, but where? I have here a project which you can see all the setup.

https://github.com/damirkusar/AngularMeetsNetCore/tree/AngularTesting And this class does the problem: navigation.spec.ts

This is an example of an error of a test which comes after the navigation.specs.. removing the navigation.spec tests the below test works.

    Chrome 56.0.2924 (Windows 10 0.0.0) NewsRoomComponent news property undefined FAILED
        TypeError: Cannot read property 'push' of undefined
            at karma.testshim.config.js:104193:37
            at Array.forEach (native)
            at new UniversalModule (karma.testshim.config.js:104191:16)
            at DynamicTestModuleInjector.createInternal (/DynamicTestModule/module.ngfactory.js:342:
29)
            at DynamicTestModuleInjector.NgModuleInjector.create (karma.testshim.config.js:52595:76)
            at NgModuleFactory.create (karma.testshim.config.js:52561:18)
            at TestBed._initIfNeeded (karma.testshim.config.js:34188:82)
            at TestBed.createComponent (karma.testshim.config.js:34257:18)
            at Function.TestBed.createComponent (karma.testshim.config.js:34086:33)
            at MainSpec.init (karma.testshim.config.js:15618:42)
            at Object.<anonymous> (karma.testshim.config.js:111972:20)
            at ZoneDelegate.invoke (karma.testshim.config.js:83750:26)
            at ProxyZoneSpec.onInvoke (karma.testshim.config.js:83316:39)
            at ZoneDelegate.invoke (karma.testshim.config.js:83749:32)
            at Zone.run (karma.testshim.config.js:83546:43)
            at Object.<anonymous> (karma.testshim.config.js:83031:34)
            at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (karma.testshim.config.js
:83061:42)
            at ZoneDelegate.invokeTask (karma.testshim.config.js:83783:31)
            at Zone.runTask (karma.testshim.config.js:83586:47)
            at drainMicroTaskQueue (karma.testshim.config.js:83949:35)
        TypeError: Cannot read property 'news' of undefined
            at Object.<anonymous> (karma.testshim.config.js:111978:35)
            at ZoneDelegate.invoke (karma.testshim.config.js:83750:26)
            at ProxyZoneSpec.onInvoke (karma.testshim.config.js:83316:39)
            at ZoneDelegate.invoke (karma.testshim.config.js:83749:32)
            at Zone.run (karma.testshim.config.js:83546:43)
            at Object.<anonymous> (karma.testshim.config.js:83031:34)
            at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (karma.testshim.config.js
:83061:42)
            at ZoneDelegate.invokeTask (karma.testshim.config.js:83783:31)
            at Zone.runTask (karma.testshim.config.js:83586:47)
            at drainMicroTaskQueue (karma.testshim.config.js:83949:35)
Chrome 56.0.2924 (Windows 10 0.0.0): Executed 12 of 12 (3 FAILED) (1.334 secs / 1.263 secs)
npm ERR! Test failed.  See above for more details.

:) was not update on my page :) thank you very much.. you are my hero.. tried a lot of things.. thank you so much.. Having now some understanding questions.. how did you debug that?:) and what kind of view do you have below? — damir

yurzui yurzui · Accepted Answer · 2017-03-03T20:21:50

As i said in comments your problem is an error inside UniversalModule

 styles.forEach(function (style) {
    sharedStylesHost._stylesSet.add(style);
    sharedStylesHost._styles.push(style); // here _styles is undefined
 });

Workaround fot that might be cleaning styles:

afterEach(() => {
   Array.from(document.querySelectorAll('style')).forEach(x => x.parentNode.removeChild(x));
   this.spec.fixture.destroy();
   this.spec.instance = null;
   this.spec = null;
});

Here is what i have done with karma config to investigate your problem

As you can see i used karma-jasmine-html-reporter package that helps us to visualize tests

Angular (4.0.0-beta.8) testing component fixture undefined after test execution with subcomponents

1 Answers