对 NgRx 效果进行单元测试以确保服务方法被调用 - 不起作用

我正在使用 NgRx ^7.0.0 版本。 这是我的 NgRx 效果类：

import { Injectable } from '@angular/core';
import { ApisService } from '../apis.service';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Observable } from 'rxjs';
import { ApisActionTypes, ApisFetched } from './apis.actions';
import { mergeMap, map } from 'rxjs/operators';

@Injectable()
export class ApisEffects {

  constructor(private apisS: ApisService, private actions$: Actions) { }

  @Effect()
  $fetchApisPaths: Observable<any> = this.actions$.pipe(
    ofType(ApisActionTypes.FetchApisPaths),
    mergeMap(() =>
      this.apisS.fetchHardCodedAPIPaths().pipe(
        map(res => new ApisFetched(res))
      )
    )
  );
}

这是一个简单的测试。正如你所看到的，它应该会失败，但总是会通过。 我在 StackOverflow 上关注了类似的问题如何对这种效果进行单元测试（使用 {dispatch: false}）？ https://stackoverflow.com/questions/48318095/how-to-unit-test-this-effect-with-dispatch-false但它对我不起作用，就好像代码执行永远不会进入effects.$fetchApisPaths.subscribe块

import { TestBed } from '@angular/core/testing';
import { provideMockActions } from '@ngrx/effects/testing';
import { hot, cold } from 'jasmine-marbles';
import { Observable, ReplaySubject } from 'rxjs';
import { ApisEffects } from '../state/apis.effects';
import { ApisFetch, ApisFetched } from '../state/apis.actions';
import { IApiPath } from '../models';
import { convertPaths, getAPIPathsAsJson, ApisService } from '../apis.service';
import { ApisServiceMock } from './mocks';

describe('Apis Effects', () => {
  let effects: ApisEffects;
  let actions: Observable<any>;
  let apisS: ApisService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        ApisEffects,
        provideMockActions(() => actions),
        {
          provide: ApisService,
          useClass: ApisServiceMock
        }
      ]
    });

    effects = TestBed.get(ApisEffects);
    apisS = TestBed.get(ApisService);
  });

  it('should call ApisService method() to get Api Paths', () => {
    const spy = spyOn(apisS, 'fetchHardCodedAPIPaths');

    const action = new ApisFetch();
    actions = hot('--a-', {a: action});

    effects.$fetchApisPaths.subscribe(() => {
      console.log('%c effect trigerred', 'color: orange; border: 1px solid red;');
      // expect(spy).toHaveBeenCalled();
      expect(true).toBe(false); // never fails
    });
  });
});

以防万一我在操作上做了一些愚蠢的事情，这里是操作文件： 我很可能不是，因为它按预期在应用程序中工作。

import { Action } from '@ngrx/store';
import { IApiPath } from '../models';

export enum ApisActionTypes {
    FetchApisPaths = '[Apis] Fetch Paths',
    FetchedApisPaths = '[Apis] Fetched Paths'
}

export class ApisFetch implements Action {
    readonly type = ApisActionTypes.FetchApisPaths;
}

export class ApisFetched implements Action {
    readonly type = ApisActionTypes.FetchedApisPaths;
    constructor(public payload: IApiPath[]) {}
}

export type ApisActions = ApisFetch | ApisFetched;

=======================编辑============================ ====

我使用了官方 ngrx 文档中的示例https://ngrx.io/guide/effects/testing https://ngrx.io/guide/effects/testing现在我可以成功进入下面的订阅块，我记录了两个控制台日志，但测试成功了。这太奇怪了！我尝试从订阅块中抛出错误，测试仍然成功。

it('should work also', () => {
    actions$ = new ReplaySubject(1);

    actions$.next(new ApisFetch());

    effects.$fetchApisPaths.subscribe(result => {
      console.log('will be logged');
      expect(true).toBe(false); // should fail but nothing happens - test succeeds
      console.log(' --------- after '); // doesn't get called, so the code
      // execution stops on expect above
    });
  });

好的，所以我成功了。为了成功测试是否从 NgRx 效果中调用特定的 Angular 服务方法，我将一个测试用例包装在async:

  it('should call ApisService method to fetch Api paths', async () => {
    const spy = spyOn(apisS, 'fetchHardCodedAPIPaths');

    actions$ = new ReplaySubject(1);
    actions$.next(new ApisFetch());
    await effects.$fetchApisPaths.subscribe();
    
    expect(spy).toHaveBeenCalled();
  });

I await effects.$fetchApisPaths.subscribe();阻止执行并在下一行运行测试断言。

现在当我尝试跑步时expect(true).toBe(false);来测试测试是否失败，它正确地失败了。

问题中我的代码存在问题（示例为ReplaySubject如 ngrx 文档中所示https://ngrx.io/guide/effects/testing https://ngrx.io/guide/effects/testing）是当断言在内部时不可能使测试失败.subscribe()堵塞。那里发生了一些可疑的事情，我仍然不知道为什么代码会以以下方式运行：

effects.$fetchApisPaths.subscribe(result => {
  console.log('will be logged');  // 1) gets logged
  expect(true).toBe(false);       // 2) should fail
  console.log(' - after ');       // 3) doesn't get called
});  

所以代码执行会在线停止2)，测试用例返回正数和线3)永远不会被处决。

所以ngrx文档中的测试用例里面有断言.subscribe()块将始终为绿色，这会给您的测试用例带来误报。这是我经历过的行为ngrx ^7.0.0

编辑 2020 年 9 月 - 更新为 ngrx 版本 9。 如果上面的解决方案对你或将来的我不起作用，因为我再次面临同样的问题，并且只能找到我自己的答案来帮助和@Christian 的精彩评论引导我解决 ngrx gitter 问题，请尝试这个方法：

 it('should call ApisService method to fetch Api paths', async () => {
  const spy = spyOn(apisS, 'fetchHardCodedAPIPaths');

  actions$ = cold('--a-', {
      a: ControlCenterTrendsLineChartPeriodChange({ numberOfMonths: 24 })
  });
  await effects.$fetchApisPaths.subscribe();

  expect(actions$).toSatisfyOnFlush(() => {
      expect(spy).toHaveBeenCalled();
});