Angular 使用 Karma 和 Jasmine TypeError : this. Service. 不是 Lifecycle Hook 中的函数

Question

Karma/Jasmine 使用npm run test -- --no-watch --no-progress -命令，抛出以下错误:

Chrome 92.0.4515.159 (Mac OS 10.15.7) LoginComponent should create FAILED
    TypeError: this.loggerService.onDebug is not a function
        at LoginComponent.ngAfterViewInit (src/app/pages/login/login.component.ts:22:24)
        at callHook (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2526:1)
        at callHooks (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2495:1)
        at executeInitAndCheckHooks (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2446:1)
        at refreshView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9516:1)
        at renderComponentOrTemplate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9559:1)
        at tickRootContext (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10790:1)
        at detectChangesInRootView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10815:1)
        at RootViewRef.detectChanges (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22865:1)
        at ComponentFixture._tick (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:141:1)

你好，

我正在 Angular 12.0.x 中编写一个 Logger-Service。该服务通过管道传输到 ngx-logger(例如外部服务器)以及存储(ngxs)。

karma.conf.js -文件针对应用程序的根目录。

非常直接的记录器服务(logging-service.ts):

import { Injectable } from '@angular/core';
import { Store } from '@ngxs/store';
import { NGXLogger } from 'ngx-logger';
import { AddLog, LogEntry } from '../store/log-state';

@Injectable({
  providedIn: 'root',
})
export class LoggerService {
  // This service pipes Log-Messages both to the store as well as to the NGXLogger.
  // Further forwarding by the NGXLogger is dependent on the properties provided in the environment.ts-file.

  constructor(private logger: NGXLogger, private store: Store) {}

  private createLogEntry(level: string, origin: string, msg: string) {
    const dateTime = new Date();
    const log: LogEntry = {
      time: dateTime,
      level: level,
      origin: origin,
      msg: msg,
      noticed: false,
    };
    return log;
  }

  onTrace(origin: string, msg: string) {
    // To NGXLogger
    this.logger.trace(msg);
    // To Store
    this.store.dispatch(new AddLog(this.createLogEntry('trace', origin, msg)));
  }

  onDebug(origin: string, msg: string) {
    // To NGXLogger
    this.logger.trace(msg);
    // To Store
    this.store.dispatch(new AddLog(this.createLogEntry('debug', origin, msg)));
  }

  onInfo(origin: string, msg: string) {
    // To NGXLogger
    this.logger.trace(msg);
    // To Store
    this.store.dispatch(new AddLog(this.createLogEntry('info', origin, msg)));
  }

  ... ... ...
}

从两个不同的位置调用Logger-Service的方法:

• 登录组件
• 日志管理器组件

使用ng serve这很好用。点进去没问题。按预期工作。

仍然使用 npm run test -- --no-watch --no-progress 运行 Karma/Jasmine -命令，抛出顶部显示的错误。删除 Login-Component 中的调用，Karma/Jasmine 没有抛出任何错误(=> 仅在 Login-Component 中)。因此，两个组件都以相同的方式导入Logger-Service，但只有 LoginComponent 抛出错误。

---

区别:Login-Component在 Angular 生命周期 Hook 中使用“onInfo”函数。 ngOnInit() 和 ngAfterViewInit() 都提供相同的结果 - 实时工作(ng 服务)但未通过 Karma/Jasmine 测试。

我需要生命周期 Hook ，因为我想跟踪访问的页面(在基本场景中)。

根据记录，两个受影响的文件:

• login.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { LoggerService } from 'src/app/services/logging.service';

@Component({
  selector: 'lep-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less'],
})
export class LoginComponent implements AfterViewInit {
  constructor(
    private loggerService: LoggerService,
  ) {}

  ngAfterViewInit() {
    this.loggerService.onDebug('Login', 'SampleMessage');
  }
}

• login.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoggerService } from 'src/app/services/logging.service';

import { LoginComponent } from './login.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [{ provide: LoggerService, useClass: class {} }],
    }).compileComponents();
  });

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

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

这些文件来自 Log-Manager-Component看起来(几乎)一样。如前所述，不同之处在于 Log-Manager-Component线..

this.loggerService.onDebug('Login', 'SampleMessage');

.. 位于由 html 页面上的按钮触发的函数中。

有什么建议可以解决这个问题吗？ :)

Answer 1

在 TestBed.configureTestingModule 的测试中，providers: [{ Provide: LoggerService, useClass: class {} }] 部分意味着，一个空对象(我的意思是应将 {})而不是 LoggerService 作为模拟对象提供。 {} 空对象没有 onDebug 函数，这就是为什么在以下情况下会抛出 this.loggerService.onDebug is not a function 错误测试被执行。 (使用 ngserve 应用程序可以正常工作，因为提供了 LoggerService 本身，它具有 onDebug 的实现。)

因此，如果您希望在测试中为 LoggerService 提供一个模拟对象，则必须从 LoggerService 本身模拟所需的函数。例如，如果只需要 onDebug 函数:

await TestBed.configureTestingModule({
  declarations: [LoginComponent],
  providers: [{ provide: LoggerService, useClass: LoggerServiceMock }],
}).compileComponents();

...

// Outside of the jasmin describes
class LoggerServiceMock {
  onDebug(origin: string, msg: string) {};
}

上面的onDebug函数现在是一个空函数作为示例，这个空函数将在测试中调用，而不是LoggerService的onDebug函数。如果测试中提供了 LoggerService 本身，并且使用 jamsine spy 过度定义了所需的函数，则可能不需要使用这种模拟对象。