Angular (4.0.0-beta.8) 测试执行子组件后未定义的组件夹具

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

我真的不知道发生了什么,但是在测试我的 Angular 代码时我有一个非常奇怪的行为。我只是在设置一些东西,大多数东西都能工作,但如果我在 TestBed.configureTestingModule 的声明中定义了子组件,那就不行了。 describe 中的第一个测试有效,此测试之后的所有其他测试,即使在另一个文件中,也不再有效,因为 fixture = TestBed.createComponent(component);没有被执行(我假设,因为夹具未定义)

当然,我在某个地方犯了一个大错误,但是在哪里呢? 我这里有一个项目,您可以看到所有设置。

https://github.com/damirkusar/AngularMeetsNetCore/tree/AngularTesting 这个 class 解决了这个问题:navigation.spec.ts

这是 navigation.specs 之后出现的测试错误示例。删除 navigation.spec 测试后,下面的测试有效。

    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.

正如我在评论中所说,您的问题是 UniversalModule 内部的一个错误

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

可能是清理样式的解决方法:

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

这是我用业力配置所做的调查你的问题

如你所见,我使用了 karma-jasmine-html-reporter 包来帮助我们可视化测试