在 Angular 2 中测试服务时，NgModule 'DynamicTestModule' 的提供程序无效答案

【问题标题】：Invalid provider for the NgModule 'DynamicTestModule' when testing a service in Angular 2在 Angular 2 中测试服务时，NgModule 'DynamicTestModule' 的提供程序无效
【发布时间】：2017-06-18 05:25:25
【问题描述】：

我有以下服务：

import { Injectable } from '@angular/core';

import { MenuItem } from './../classes/menu-item';
import { ITEMS } from './../static-data/items-list';

@Injectable()
export class ItemsListService {

    getItems(): Promise<MenuItem[]> {
        return Promise.resolve(ITEMS);
    }

}

这个服务的测试在这里：

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

import { ItemListService } from './item-list.service';
import { MenuItem } from './../classes/menu-item';
import { ITEMS } from './../static-data/items-list';

describe('ItemListService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [ ItemListService, MenuItem, ITEMS ]
    });
  });

  it('should ...', inject([ItemListService], (service: ItemListService) => {
    expect(service).toBeTruthy();
  }));
});

MenuItem 在这里定义：

export class MenuItem {
    name: string;
    link: string;
}

ITEMS 在这里定义：从 './../classes/menu-item' 导入 { MenuItem };

export var ITEMS: MenuItem[] = [
    {name: 'Vehicles', link: '/vehicles'},
    {name: 'Gateways', link: '/gateways'},
    {name: 'Statuses', link: '/statuses'},
    {name: 'Logs', link: '/logs'}
]

当我运行测试时，我在浏览器控制台中出现以下错误：

FAILED ItemListService should ...

和

那么为什么我会出现这些错误？测试工作的解决方案是什么？

【问题讨论】：

你在ItemListService中有依赖吗？
不，我没有，但我发现了问题。看看我的答案。

标签： javascript angular testing angular-services

【解决方案1】：

这是一个令人讨厌的错误，我想我会在您的规范中包含另一个需要寻找的微妙原因。就我而言，我指定了providers 而不是provide 的正确值，如下所示

 TestBed.configureTestingModule({
      providers: [{provider: ApplicationActions, useClass: ActionMock}]

而不是提供有用的信息，例如“没有指定'提供'键”，它只是报告

失败：NgModule 'DynamicTestModule' 的提供程序无效 - 仅限允许提供 Provider 和 Type 的实例，得到：[?[object Object]?, ...]

【讨论】：

并明确检查拼写和大小写。当我研究这个问题时，这是因为我使用了大写字母而不是小写字母。 Provide 而不是 provide
很好，只是为了明确，我添加了正确的语法：providers: [{provide: ApplicationActions, useClass: ActionMock}] 或 providers: [{provide: ApplicationActions, useValue: actionMockInstance}]
这是provide 不是provider
我有这个错误是因为一个额外的逗号。

【解决方案2】：

在我的例子中，我的一个提供程序行中有一个杂散的逗号，导致 DynamicTestModule 认为我通过了 undefined 定义。

        {
          provide: ApiService,
          useValue: {
            getUsers: jasmine
              .createSpy('getUsers')
              .and.returnValue(of({ status: 200, body: [] })),
          },
        },
        , // whoops!
        MessageService,
        { provide: Location, useValue: { back: jasmine.createSpy('back') } },

【讨论】：

【解决方案3】：

在我的Ionic Framework 项目中导入时遇到同样的问题：

import {Device} from '@ionic-native/device'

代替：

import {Device} from '@ionic-native/device/ngx'

【讨论】：

这个响应没有用。