Angular Jest 或 Jasmine 测试：如何正确地 Spy/Mock 从测试中调用静态对象 Class？

Question

我有一个 AppConfigService，它可以将一个对象从 JSON 文件加载到作为服务一部分的静态设置变量中。整个应用程序中的各种组件 and/or 服务使用 AppConfigService.settings 引用对象，使用简单引用（无注入）。我如何测试引用这种构造的服务？

例如

@Injectable()
export class SomeService {
someVariable;
  constructor() {
    // I can't get the test to not give me a TypeError: Cannot read property 'someSettingsVariable' of undefined on this line
    this.someVariable = AppConfigService.settings.someSettingsVariable;
  }
}

我有两个项目，一个使用 Jest，另一个 Jasmine/Karma 我需要弄清楚如何让测试在这个构造中工作的模式。

我试过类似的东西：

const spy = spyOnProperty(SomeService, 'someVariable')
        .and.returnValue('someValue');

规范示例：

import { TestBed } from '@angular/core/testing';
import { NgRedux } from '@angular-redux/store';
import { Injectable } from '@angular/core';
import { DispatchHelper } from '../reducers/dispatch.helper';
import { ContributorActions } from '../actions/contributor.action';
import { MockDispatchHelper } from '../_mocks/DispatchHelperMock';
import { DiscrepancyService } from '../discrepancies/discrepancy.service';
import { DiscrepancyAPIService } from '../discrepancies/discrepancy-api.service';
import { DiscrepancyAPIServiceMock } from '../_mocks/DiscrepancyAPIServiceMock';
import { Observable } from 'rxjs';
import { Guid } from 'guid-typescript';
import { getInitialUserAccountState } from '../functions/initial-states/user-account-initial-state.function';
import { LoggingService } from '../security/logging/logging.service';
import { MockLoggingService } from '../_mocks/LoggingServiceMock';

describe('discrepancyService', () => {

    let discrepancyService: DiscrepancyService;

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                { provide: Injectable, useClass: Injectable },
                { provide: DispatchHelper, useClass: MockDispatchHelper },
                { provide: ContributorActions, useClass: ContributorActions },
                { provide: NgRedux, useClass: NgRedux },
                { provide: DiscrepancyService, useClass: DiscrepancyService },
                { provide: DiscrepancyAPIService, useClass: DiscrepancyAPIServiceMock },
                { provide: LoggingService, useClass: MockLoggingService },
            ]
        })
            .compileComponents();

        const userStateObservable = Observable.create(observer => {
            const userState = getInitialUserAccountState();
            userState.userId = Guid.parse('<guid>');
            userState.organization_id = Guid.parse('<guid>');
            observer.next(userState);
            console.log('built user state observable');
            observer.complete();
        });

        discrepancyService = TestBed.get(DiscrepancyService);
        const spy4 = spyOnProperty(discrepancyService, 'userState$', 'get').and.returnValue(userStateObservable);
    });


    // TODO: Fix this
    it('should create service and loadDiscrepancies', () => {
      // in this example, discrepancyService constructor sets the
      // value of a variable = ApiConfigService.settings.endPoint
      // ApiConfigService.settings is static; how do I "replace"
      // the value of endPoint in a call like this so I don't get
      // an error because ApiConfigService.settings is undefined
      // when called from a service in the test?
      const spy = spyOn(discrepancyService.dispatcher, 'dispatchPayload');
      discrepancyService.loadDiscrepancies();
      expect(spy.calls.count()).toEqual(1);
    });

});

karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-spec-reporter')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [ '--remote-debugging-port=9333','--disable-web-security' ]
      },
      ChromeHeadlessCI: {
        base: 'Chrome',
        flags: ['--no-sandbox', '--headless', '--watch=false'],
        browserDisconnectTolerance: 10,
        browserNoActivityTimeout: 10000,
        browserDisconnectTimeout: 5000,
        singleRun: false
      }
    },
    reporters: ['progress', 'kjhtml', 'spec'],
    port: 9876,
    host: 'localhost',
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeDebug', 'ChromeHeadlessCI'],
    singleRun: false
  });
};

测试专家的任何帮助将不胜感激。

Answer 1

我可以通过三种方式了解它

直接设置值

// TODO: Fix this
it('should create service and loadDiscrepancies', () => {
  // in this example, discrepancyService constructor sets the
  // value of a variable = ApiConfigService.settings.endPoint
  // ApiConfigService.settings is static; how do I "replace"
  // the value of endPoint in a call like this so I don't get
  // an error because ApiConfigService.settings is undefined
  // when called from a service in the test?
  AppConfigService.settings = { endpoint: 'http://endpoint' }
  const spy = spyOn(discrepancyService.dispatcher, 'dispatchPayload');
  discrepancyService.loadDiscrepancies();
  expect(spy.calls.count()).toEqual(1);
});

添加空检查和 setter

@Injectable()
export class SomeService {
someVariable;
  constructor() {
    // I can't get the test to not give me a TypeError: Cannot read property 'someSettingsVariable' of undefined on this line
    if (AppConfigService && AppConfigService.settings) {
        this.someVariable = AppConfigService.settings.someSettingsVariable;
    }
  }
}

set endPoint(value) {
    this.someVariable = value
}

隐藏服务背后的静态实现

这对我来说是迄今为止最好的解决方案。与其使用静态实现，不如创建一个可以轻松监视的单个实例服务。这不仅是您可以想象的问题，而且是所有避免使用静态实现的 OOP 语言的问题。

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

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  private endpoint: string;
  constructor() { }
  get endPoint(): string {
      return this.endPoint;
  }
}

运行时 angular 配置的完整示例 here

Angular Jest 或 Jasmine 测试：如何正确地 Spy/Mock 从测试中调用静态对象 Class？

Angular Jest or Jasmine Testing: How to Properly Spy/Mock a Static Object Called From Within a Tested Class?

testing

jasmine

jestjs

angular

angular8

直接设置值

添加空检查和 setter

隐藏服务背后的静态实现