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，您的回答“我遇到了类似的问题，将角度导入移动到区域导入以下很有帮助。”解决了我的问题。我整天都在努力！谢谢！

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

Angular TestBed因Webpack，Karma / Jasmine而失败

1 个答案: