Angular单元测试没有通过 - 异常的phantomjs错误

Posted 2021-04-09

我运行ng test来运行硬编码传递的3个单元测试，例如：

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ],
      declarations: [
        AppComponent
      ]
    }).compileComponents();
  }));

  it('should create the app', () => {
    // const fixture = TestBed.createComponent(AppComponent);
    // const app = fixture.debugElement.componentInstance;
    // expect(app).toBeTruthy();

    expect(true).toBe(true);
  });

但是，我得到了这个奇怪的错误：

12 04 2019 16:38:11.231:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
12 04 2019 16:38:11.256:INFO [launcher]: Starting browser PhantomJS                                                             12 04 2019 16:38:19.761:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket nXFNY5PRUCvs5FtgAAAA with id 70621517
PhantomJS 2.1.1 (Windows 8 0.0.0) AppComponent should create the app FAILED
        parse
        then
        _parseTemplate
        _compileTemplate
        forEach
        _compileComponents
        _compileModuleAndAllComponents
        compileModuleAndAllComponentsAsync
        compileModuleAndAllComponentsAsync
        compileModuleAndAllComponentsAsync
        compileComponents
        compileComponents
        invoke
        onInvoke
        onInvoke
        invoke
        runGuarded
        runInTestZone
        invoke
        onInvoke
        invoke
        run
        runInTestZone
        execute
        execute
        invokeTask
        runTask
        drainMicroTaskQueue
        parse
        then
        _parseTemplate
        _compileTemplate
        forEach
        _compileComponents
        _compileModuleAndAllComponents
        compileModuleAndAllComponentsSync
        compileModuleAndAllComponentsSync
        compileModuleAndAllComponentsSync
        _initIfNeeded
        createComponent
        createComponent
        invoke
        onInvoke
        invoke
        run
        runInTestZone

这就是所有的错误堆栈说。

答案

我在我的import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';文件中导入了app.component.ts并在那里使用它，所以我还必须将它导入我的.spec.ts文件并将其声明为模式：

import { TestBed, async } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ],
      declarations: [
        AppComponent
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA // needed to add this
      ]
    }).compileComponents();
  }));