Angular 2 单元测试错误：无法解析“RequestOptions”的所有参数答案

【问题标题】：Angular 2 Unit test Error: Cannot resolve all parameters for 'RequestOptions'Angular 2 单元测试错误：无法解析“RequestOptions”的所有参数
【发布时间】：2016-11-18 22:22:28
【问题描述】：

我想测试一个具有一些依赖项的简单组件。因此，除其他外，我必须提供一些提供者。

/* tslint:disable:no-unused-variable */

import { By }           from '@angular/platform-browser';
import { DebugElement, provide } from '@angular/core';

import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  fakeAsync,
  TestComponentBuilder
} from '@angular/core/testing';

import { AuthHttp, AuthConfig } from 'angular2-jwt';
import { Router, provideRouter } from '@angular/router';
import { Http, ConnectionBackend, RequestOptions, HTTP_PROVIDERS } from '@angular/http';
import { LogoutButtonComponent } from './logout-button.component';
import { UserService } from '../../services/index';

describe('Component: LogoutButtonComponent', () => {

  let component: LogoutButtonComponent;

  beforeEachProviders(() => [
    LogoutButtonComponent,
    Http,
    provide(AuthHttp, { useFactory: Http }),
    provide(AuthConfig, { useValue: new AuthConfig() }),
    ConnectionBackend,
    RequestOptions,
    UserService
  ]);

  beforeEach(inject([AuthHttp, UserService, LogoutButtonComponent],
    (comp: LogoutButtonComponent) => {
      component = comp;
    }));

  it('should inject UserService', () => {
    // My test here
  });

});

虽然我收到以下错误：

错误：无法解析“RequestOptions”(?) 的所有参数。确保所有参数都用 Inject 修饰或具有有效的类型注释，并且 'RequestOptions' 用 Injectable 修饰。

我在beforeEachProviders 函数中遗漏了什么吗？

注意：此问题仅与 Angular 2 与 Jasmine 的单元测试有关。我没有搜索与引导应用程序相关的信息，因为这在我的应用程序中已经可以了，这里还有其他相关问题。

【问题讨论】：

标签： unit-testing typescript angular jasmine

【解决方案1】：

RequestOptions 不是可注入的，您不能将其注入到类中。相反，您在发出 HTTP 请求时根据需要实例化一个。因此，您可以将其从beforeEachProviders 中删除，如果您在测试中确实需要它，则在beforeEach 中实例化一个：

let options: RequestOptions;

beforeEach(inject([AuthHttp, UserService, LogoutButtonComponent],
    (comp: LogoutButtonComponent) => {
      component = comp;
      options = new RequestOptions({method: RequestMethod.Post});
}));

【讨论】：

嗨@Sunil，在这种情况下我得到：Error: No provider for RequestOptions! (AuthHttp -> RequestOptions)
@VassilisPits 你在哪里得到这个错误？你试图在某个地方注入RequestOptions，你不应该这样做。 1）你不能注入这个类，它没有Injectable()注解，检查source。您只需要使用new 运算符实例化RequestOptions 对象，如上所示，如documentation 所示。
我没有在其他地方注射，这很奇怪：/

【解决方案2】：

您必须将 HttpModule 导入到您的 TestBed 配置中。

import { HttpModule } from "@angular/http";

TestBed.configureTestingModule({
  imports: [
    HttpModule
  ]
});

之后单元测试应该可以工作了??

【讨论】：

这是唯一适用于 beforeEachProviders 已被弃用的最新 Angular 4 的解决方案。

【解决方案3】：

我通过从@angular/http 导入HttpModule 和Http 修复了我的错误：

import {HttpModule, Http} from "@angular/http"; 
...

TestBed.configureTestingModule({
  imports: [HttpModule], // <!-- HTTP module
  providers: [HttpService, SourceService, Http] // <!-- HTTP
});

【讨论】：

【解决方案4】：

模拟用户服务可能会更好，然后您不必担心 RequestOptions 或 HttpModule，这是我解决上述问题的方法：

import { RouterTestingModule } from '@angular/router/testing';
import { TestBed } from '@angular/core/testing';
import { LogoutButtonComponent } from './logout-button.component';
import { UserService } from '../../services/index';

describe('Component: LogoutButtonComponent', () => {

  let component: LogoutButtonComponent;
  let fixture: ComponentFixture<LogoutButtonComponent>;
  let mockUserService;

    beforeEach(() => {
        // Provide array of user service methods used in LogoutButtonComponent to the createSpyObj
        mockUserService = jasmine.createSpyObj(['exampleUserServiceMethod']);

        TestBed.configureTestingModule({
            declarations: [ LogoutButtonComponent ],
            providers: [
                { provide: UserService, useValue: mockUserService }
            ],
            // Only if your component uses routing
            imports: [
                RouterTestingModule
            ]
        });

        fixture = TestBed.createComponent(LogoutButtonComponent);
        component = fixture.componentInstance;

    })

  it('should inject UserService', () => {
    // My test here
  });

});

【讨论】：