为什么我的 TestBed 提供者不覆盖真实的服务？答案

【问题标题】：Why does my TestBed providers don't override the real service?为什么我的 TestBed 提供者不覆盖真实的服务？
【发布时间】：2019-12-22 12:14:13
【问题描述】：

我正在尝试测试一个具有依赖关系的简单组件。我试图模拟这种依赖关系，但真正的服务仍在构建中。有人能发现我错过了什么吗？

这是我的组件：

import { Component } from "@angular/core";
import { AuthService } from "src/app/services/auth.service.js";

@Component({
  selector: "app-auth-form",
  template: ""
})
export class AuthFormComponent {
  constructor(private authService: AuthService) {}
}

这取决于这个AuthService：

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { UserModule } from "../user/user.module";

@Injectable({
  providedIn: "root"
})
export class AuthService {
  constructor(private http: HttpClient) {}

  registerUser(email: string, password: string): Promise<UserModule> {
    return null;
  }
}

注意它又依赖于HttpClient。

现在我的测试看起来像这样：

import { async, TestBed } from "@angular/core/testing";
import { AuthFormComponent } from "./auth-form.component";
import { AuthService } from "src/app/services/auth.service";

describe("AuthFormComponent", () => {
  beforeEach(async(() => {
    const authServiceSpy = jasmine.createSpyObj("AuthService", [
      "registerUser"
    ]);

    TestBed.configureTestingModule({
      declarations: [AuthFormComponent],
      providers: [{ provide: AuthService, useValue: authServiceSpy }]
    }).compileComponents();
  }));

  it("should create", () => {
    let component = TestBed.createComponent(AuthFormComponent)
      .componentInstance;
    expect(component).toBeTruthy();
  });
});

这里请查看{ provide: AuthService, useValue: authServiceSpy } 行，因此我希望不会构造真正的AuthService。但是当我运行测试时，出现以下错误：

Chrome 78.0.3904 (Windows 10.0.0) AuthFormComponent should create FAILED
        NullInjectorError: StaticInjectorError(DynamicTestModule)[HttpClient]: 
          StaticInjectorError(Platform: core)[HttpClient]: 
            NullInjectorError: No provider for HttpClient!
        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ Function ], ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33603585, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 49152, directChildFlags: 49152, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'app-auth-form', attrs: [  ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 49152, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0 ...
            at <Jasmine>
            at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:855:1)
            at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
            at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
            at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
            at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
            at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
            at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
            at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30393:1)
            at NgModuleRef_.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:31578:1)
            at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:734:1)
Chrome 78.0.3904 (Windows 10.0.0): Executed 3 of 3 (1 FAILED) (0 secs / 0.077 secs)
Chrome 78.0.3904 (Windows 10.0.0) AuthFormComponent should create FAILED
        NullInjectorError: StaticInjectorError(DynamicTestModule)[HttpClient]: 
          StaticInjectorError(Platform: core)[HttpClient]: 
            NullInjectorError: No provider for HttpClient!
        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ Function ], ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33603585, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 49152, directChildFlags: 49152, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'app-auth-form', attrs: [  ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 49152, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: -1, childCount: 0 ...
            at <Jasmine>
            at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:855:1)
            at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
            at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
            at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
            at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
            at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
            at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
            at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30393:1)
            at NgModuleRef_.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:31578:1)
Chrome 78.0.3904 (Windows 10.0.0): Executed 3 of 3 (1 FAILED) (0.096 secs / 0.077 secs)

在我看来，它试图构造真正的AuthService，但没有它的依赖项。任何指针都会很棒！

编辑

我在 StarBlitz 中重新创建了场景 - https://angular-wrk4yi.stackblitz.io，但它在那里工作正常。所以它一定在我的尽头。

【问题讨论】：

我不知道:) 他们似乎没有必要。我可以在创建 console.log(authServiceSpy) 之后执行它并在那里获取一些对象。我应该明确添加一些吗？
请问我的回答有帮助吗？
哦，现在我看到您确实在下面提供了答案。抱歉没发现是同一个人。
尝试导入 HttpClientTestingModule 并添加导入。然后检查输出是什么？？
@PALLAMOLLASAI 是对的，尝试导入 HttpClientTestingModule 并在 TestBed.configureTestingModule 中添加导入

标签： angular testing dependency-injection jasmine

【解决方案1】：

编辑

终于明白了！问题在于进口。在我的组件中，我有：

import { AuthService } from "src/app/services/auth.service.js";

而不是：

import { AuthService } from "src/app/services/auth.service";

然后我假设它从 dist 文件夹加载 javascript 版本，然后提供的类型基数不起作用。

我不知道是什么提供了原始服务，但找到了这个解决方法：

TestBed.overrideProvider(AuthService, { useValue: authServiceSpy})

根据名称，这将覆盖真正的服务提供商来自何处。而且我不再需要支持真正的 AuthService 依赖项 + 主要是被测试的类实际上在这里使用了我的间谍！

【讨论】：