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

Question

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

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

https://github.com/damirkusar/AngularMeetsNetCore/tree/AngularTesting这个类解决了这个问题: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.

Answer 1

正如我在评论中所说，您的问题是 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 配置所做的调查你的问题

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