Question

我已经通过Angular CLI创建了几个组件和服务。 spec文件是自动生成的。

运行我的测试（其中的56个）时，它们两次均失败，并显示相同的消息：

失败：模块声明了意外的值'[object Object]' 'DynamicTestModule'

我理解为什么要两次，因为我有两个被调用的beforeEach方法。删除一个beforeEach还可以删除其中一个错误。我听到你说：“然后删除两个'beforeEach'方法”。然后我的测试将不再运行。

我现在已经花了2天的时间来研究这个问题，我完全没有主意。

我能找到解决此问题的唯一答案是，我需要将路由文件导入到规范文件中。做到了，但结果还是一样。

使用全新安装的Angular 8。

我还尝试使用间谍创建QueueComponent，因为它的构造函数中需要QueueService。同样，结果相同。

其中一个规格文件如下所示：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { QueuesComponent } from './queues.component';
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
import {Queue} from '../../objects/queue';
import {environment} from '../../../environments/environment';
import {AppRoutingModule} from './../../app-routing.module';

describe('QueuesComponent', () => {
  let component: QueuesComponent;
  let fixture: ComponentFixture<QueuesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [faCheckCircle, faTimesCircle, Queue, environment ],
      imports: [AppRoutingModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(QueuesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

属于此规范文件的组件是：

import {Component, OnDestroy, OnInit} from '@angular/core';
import {QueueService} from '../../services/queue.service';
import {Queue} from '../../objects/queue';

@Component({
  selector: 'app-queues',
  templateUrl: './queues.component.html',
  styleUrls: ['./queues.component.css']
})
export class QueuesComponent implements OnInit, OnDestroy {

  failureQueues: Queue[];
  monitorQueues: Queue[];

  constructor(private queueService: QueueService) {
  }

  ngOnInit() {
  }

  ngOnDestroy() {
  }
}

HTML文件仅在标签中显示标题。

我希望测试正常进行，因为我没有做任何花哨的事情。至少在我看来。

完整的错误消息是：

QueuesComponent > should create

Failed: Unexpected value '[object Object]' declared by the module 'DynamicTestModule'
error properties: Object({ ngSyntaxError: true })
Error: Unexpected value '[object Object]' declared by the module 'DynamicTestModule'
    at syntaxError (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1)
    at http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:19694:1
    at <Jasmine>
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:19692:1)
    at JitCompiler._loadModules (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25402:1)
    at JitCompiler._compileModuleAndAllComponents (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25391:1)
    at JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25353:1)
    at CompilerImpl.compileModuleAndAllComponentsAsync (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.js:237:1)
    at TestingCompilerImpl.compileModuleAndAllComponentsAsync (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/platform-browser-dynamic/fesm2015/testing.js:140:1)
    at TestBedViewEngine.compileComponents (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.js:3086:1)


Error: Unexpected value '[object Object]' declared by the module 'DynamicTestModule'
error properties: Object({ ngSyntaxError: true })
Error: Unexpected value '[object Object]' declared by the module 'DynamicTestModule'
    at syntaxError (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1)
    at http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:19694:1
    at <Jasmine>
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:19692:1)
    at JitCompiler._loadModules (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25402:1)
    at JitCompiler._compileModuleAndAllComponents (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25391:1)
    at JitCompiler.compileModuleAndAllComponentsSync (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25350:1)
    at CompilerImpl.compileModuleAndAllComponentsSync (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.js:225:1)
    at TestingCompilerImpl.compileModuleAndAllComponentsSync (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/platform-browser-dynamic/fesm2015/testing.js:132:1)
    at TestBedViewEngine._initIfNeeded (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/testing.js:3108:1)


Expected undefined to be truthy.
Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/webpack:/src/app/components/queues/queues.component.spec.ts:29:23)
    at ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:359:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:308:1)

Answer 1

按照Erbsenkoenig的建议，我删除了所有不必要的代码，并为QueueService创建了一个存根（依次使用HttpClient）。

import {async, ComponentFixture, getTestBed, TestBed} from '@angular/core/testing';

import { QueuesComponent } from './queues.component';
import {QueueService} from '../../services/queue.service';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

const dummyQueues = [
  {value: 33, name: 'MDM03', max: 300},
  {value: 0, name: 'MDM99', max: 200}
];

class StubQueueService {
  getFailureQueues() {
    return Observable.of(dummyQueues);
  }
  getMonitorQueues() {
    return Observable.of(dummyQueues);
  }
}

describe('QueuesComponent', () => {
  let component: QueuesComponent;
  let fixture: ComponentFixture<QueuesComponent>;

  beforeEach(async(() => {
    let injector;
    let queuesService: QueueService;

    TestBed.configureTestingModule({
      declarations: [ QueuesComponent ],
      imports: [ HttpClientTestingModule ],
      providers: [
        {provide: QueueService, useClass: StubQueueService}
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    }).compileComponents();

    injector = getTestBed();
    queuesService = injector.get(QueueService);
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(QueuesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

所有测试都给出相同的失败结果，但是为什么呢？

1 个答案: