Angular TestBed 因 Webpack、Karma/Jasmine 而失败

Question

我尝试按照 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();
    });
  })

Answer 1

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

对于其他寻找答案的人来说，我的 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 文件数组进行任何更改。它只包含我的规范文件模式。