Angular TestBed 因 Webpack、Karma/Jasmine 而失败答案

【问题标题】：Angular TestBed fails with Webpack, Karma/JasmineAngular TestBed 因 Webpack、Karma/Jasmine 而失败
【发布时间】：2017-08-28 11:57:00
【问题描述】：

我尝试使用 Angular.io 网站上描述的 Angular TestBed 来测试一个简单的组件，但我收到如下错误：TypeError: undefined is not an object (evaluating 'ProxyZoneSpec.assertPresent') 和 404，因为它无法加载外部组件模板。

如果我创建一个示例单元测试，而不使用/设置 TestBed，它可以正常工作，因此至少为项目正确设置了 Karma 和 Jasmine。该问题与 Angular TestBed 有关。除了 angular.io 还有其他文档吗？按照那些文档，它似乎不起作用。

karma.conf.js

var webpackConfig = require('./webpack/webpack.dev.js');

module.exports = function (config) {
  config.set({
      basePath: '',
      frameworks: ['jasmine'],
      files: [            
        './app/polyfills.ts',
        './app/**/*.spec.ts',
      ],
      exclude: [    ],
      preprocessors: {
        './app/polyfills.ts': ['webpack', 'sourcemap'],
        './app/**/*.spec.ts': ['webpack', 'sourcemap']
      },
      webpack: {
        devtool: 'inline-source-map',
        module: webpackConfig.module,
        resolve: webpackConfig.resolve
      },
      mime: {
        'text/x-typescript': ['ts', 'tsx']
      },

reporters: ['progress', 'junit', 'tfs'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
})
}

component.ts

import { Input, Component } from "@angular/core";

@Component({
    selector: "user-contact",
    templateUrl: "./user-contact.component.html",
    styleUrls: ["./userContact.scss"],
})

export class UserContactComponent {

    @Input()
    public name: string;
}

component.spec.ts

 import { ComponentFixture, TestBed, async } from "@angular/core/testing";
 import {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting,
 } from "@angular/platform-browser-dynamic/testing";
 import { By } from "@angular/platform-browser";
 import { DebugElement } from "@angular/core";

 import { UserContactComponent } from "./user-contact.component";

 // zone.js
  import "zone.js/dist/proxy";
  import "zone.js/dist/sync-test";
  import "zone.js/dist/async-test";

  // Without this import I get the following error:
  // Expected to be running in 'ProxyZone', but it was not found
  import "zone.js/dist/jasmine-patch"; 

  TestBed.initTestEnvironment(
      BrowserDynamicTestingModule,
      platformBrowserDynamicTesting(),
  );

  describe("Component: user contact", () => {

  let component: UserContactComponent;
  let fixture: ComponentFixture<UserContactComponent>;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
          declarations: [UserContactComponent],
      })
    .compileComponents();
    }));

    it("should have a defined component", () => {
       fixture = TestBed.createComponent(UserContactComponent);
       component = fixture.componentInstance;
       fixture.detectChanges();
       expect(this.component).toBeDefined();
    });
  })

【问题讨论】：

您是否尝试删除调用initTestEnvironment() 的部分？
你看到这个旧的角度问题了吗？也许这是链接：github.com/angular/angular/issues/11317
我遇到了类似的问题，在区域导入下方移动角度导入有帮助。
@BartBiczBoży：我重新安排了导入，确实奏效了。如果您从评论中创建答案，我会接受。谢谢。

标签： angular karma-webpack testbed

【解决方案1】：

@BartBiczBozy，您的回答“我遇到了类似的问题，将角度导入移动到区域导入下方有帮助。”解决了我的问题。我整天都在为此苦苦挣扎！谢谢！

对于寻找答案的其他人来说，我的 test.ts 现在看起来像这样

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';

import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

我最终不必对我的 karma.conf.js 文件数组进行任何更改。它只包含我的规范文件模式。

【讨论】：