Angular 5 - Jasimine 测试 - 错误：NgModule 'DynamicTestModule' 的提供程序无效 - 只允许提供 Provider 和 Type 的实例

Question

我正在尝试测试一个组件类，但是，我的测试不起作用。

这是堆栈错误的一部分：

Error: Invalid provider for the NgModule 'DynamicTestModule' - only instances of Provider and Type are allowed, got: [AlertModaldataComponent, [object Object], [object Object], ?[object Object]?, ...] in http://localhost:9878/_karma_webpack_/main.bundle.js (line 94300)
_reportError@http://localhost:9878/_karma_webpack_/main.bundle.js:94300:24
http://localhost:9878/_karma_webpack_/main.bundle.js:94095:39
forEach@[native code]
_getProvidersMetadata@http://localhost:9878/_karma_webpack_/main.bundle.js:94063:26

这是我的组件类

import { Component, OnInit, ViewChildren, QueryList, OnDestroy } from '@angular/core';
    import { MatMenuTrigger } from '@angular/material';
    import { Router } from '@angular/router';
    import { RefreshOnActionService } from './../../../services/refresh-on-action.service';
    import { AlertModaldataComponent } from './../../common/modal/alert-modaldata.component';
    import { RefreshEntityEnum } from './../../../shared/models/refresh-entity-enum';
    import { RefreshService } from './../../../services/refresh.service';
    import { AppService } from '../../../services/app.service';
    import { setInterval, clearInterval } from 'timers';
    import { StatusRefreshEnum } from '../../../shared/models/status-refresh-enum';

    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.scss']
    })
    export class HeaderComponent implements OnInit, OnDestroy {
      loggedUserId;
      showHeader = true;
      isLoading: boolean;
      isAdmin = false;
      menuItens: Array<any> = [];
      refreshId: number;
      balloon = false;
      balloonItens = 0;
      second = '00';
      minute = '00';
      hour = '00';
      timerZeroed = true;
      updatingList = false;
      getItemsQuantityInterval: any;
      private timer: any = null;

      constructor(
        private appService: AppService,
        private refreshService: RefreshService,
        private modal: AlertModaldataComponent,
        private router: Router,
        private refreshOnActionService: RefreshOnActionService
      ) {
        ...
      }

      @ViewChildren(MatMenuTrigger) trigger: QueryList<MatMenuTrigger>;

      ngOnInit() {
        ...
      }

      ngOnDestroy() {
        ...
      }

      refreshMenuItems(): void {
        ...
      }

      refreshBalloonInfo() { 
        ...
      }

      startTimer(): void {
        ...
      }

      activateSetTimeIntervalForItemsQuantity() {
        ...
      }

      openMatMenu() {
        ...
      }

      closeMatMenu() {
        ...
      }

      itemView(itemKey: any, type: RefreshEntityEnum, status: StatusRefreshEnum) {
        ...
      }

      timing(timestamp: number) {
        ...
      }

      aprove() {
        ...
      }
    }

这是我的规范类...

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Router } from '@angular/router';

import { RefreshOnActionService } from './../../../services/refresh-on-action.service';
import { RefreshService } from './../../../services/refresh.service';
import { CommonOsgComponentsModule } from './../../common/common-osg-components.module';
import AppServiceStub from '../../../shared/testStubs/app-stub.service';
import RefreshServiceStub from '../../../shared/testStubs/refreshService-stub';
import { AppService } from '../../../services/app.service';
import { setCssTransformAsValidForPhantomBrowser } from '../../../shared/helpers';
import { HeaderComponent } from './header.component';
import { AngularMaterialModule } from '../../../angular-material/angular-material.module';
import RouterStub from '../../../shared/testStubs/router-stub';
import { RefreshEntityEnum } from '../../../shared/models/refresh-entity-enum';
import { StatusRefreshEnum } from '../../../shared/models/status-refresh-enum';
import { AlertModaldataComponent } from '../../common/modal/alert-modaldata.component';

fdescribe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(() => {
    setCssTransformAsValidForPhantomBrowser();
    TestBed.configureTestingModule({
      imports: [
        NoopAnimationsModule,
        AngularMaterialModule,
        CommonOsgComponentsModule
      ],
      declarations: [
        HeaderComponent
      ],
      providers: [
        AlertModaldataComponent,
        {
          provide: AppService,
          useClass: AppServiceStub
        },
        {
          provide: Router,
          useClass: RouterStub
        },
        {
          provider: RefreshService,
          useClass: RefreshServiceStub
        },
        {
          provide: RefreshOnActionService,
          useClass: RefreshOnActionService
        }
      ]
    });

    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    const appService: AppService = TestBed.get(AppService);
    appService['_userData'] = 'x195363';
    expect(component).toBeTruthy();

  });

});

每次我运行测试时，都会发生错误。总是同样的错误。 我试图在我的项目中找到 DynamicTestModule 但它不存在，我不知道如何调试或解决这个问题。有人可以帮助我吗？

Answer 1

我的一个组件也遇到了同样的错误，它期望路由数据来初始化组件。将RouterTestingModule 添加到.spec 文件中的configureTestingModule 后，错误消失了。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ InitiativeComponent],
      imports: [RouterTestingModule],
      providers: [ RouterTestingModule],
    })
    .compileComponents();
 }));

希望这对某人有所帮助。

Answer 2

使用

provide: RefreshService,
useClass: RefreshServiceStub

代替

provider: RefreshService,
useClass: RefreshServiceStub

Answer 3

在我的情况下，删除文件并重新创建具有相同内容的新文件后，一切正常。 我不知道发生了什么，但我想原始文件中的某些信息可能会损坏。